日付

標準の日付表示

曜日の表記を変更

年月を変更可能

書式を変更

週の初めを設定

日付の範囲指定

時間

標準の時間表示

表示をカスタム

インターバル

選択不可

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/classic.css" rel="stylesheet" />
<link href="<PATH>/classic.date.css" rel="stylesheet" />
<link href="<PATH>/classic.time.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/picker.js"></script>
<script>
    $(window).load(function(){
		$('#pickadateDemo01').pickadate();
		$('#pickadateDemo02').pickadate({
			weekdaysShort: ['日', '月', '火', '水', '木', '金', '土'],
			showMonthsShort: true
		});
		$('#pickadateDemo03').pickadate({
			selectMonths: true,
			selectYears: true
		});
		$('#pickadateDemo04').pickadate({
			format: 'You selecte!d: dddd, dd mmm, yyyy',
			formatSubmit: 'yyyy/mm/dd',
			hiddenPrefix: 'prefix__',
			hiddenSuffix: '__suffix'
		});
		$('#pickadateDemo06').pickadate({
			firstDay: 1
		});
		$('#pickadateDemo07').pickadate({
			min: new Date(2014,1,1),
			max: new Date(2014,9,14)
		});
		
		$('#pickadateDemo08').pickatime();
		$('#pickadateDemo09').pickatime({
			formatLabel: function(time) {
				var hours = ( time.pick - this.get('now').pick ) / 60,
					label = hours < 0 ? ' !時間経過' : hours > 0 ? ' !時間後' : '現在'
				return  'h:i a <sm!all>' + ( hours ? Math.abs(hours) : '' ) + label +'</sm!all>'
			}
		});
		$('#pickadateDemo10').pickatime({
			interval: 120
		});
		$('#pickadateDemo11').pickatime({
			disable: [
				[1,30],
				[2,30],
				[5,30],
				[10,0]
			]
		});
    });
</script>
<div class="pickadate-bigbox">
	<p class="title">日付</p>
	<div class="pickadate-box">
		<p class="title">標準の日付表示</p>
		<input id="pickadateDemo01" class="datepicker" type="text" placeholder="date">
	</div>
	
	<div class="pickadate-box">
		<p class="title">曜日の表記を変更</p>
		<input id="pickadateDemo02" class="datepicker" type="text" placeholder="date">
	</div>
	
	<div class="pickadate-box">
		<p class="title">年月を変更可能</p>
		<input id="pickadateDemo03" class="datepicker" type="text" placeholder="date">
	</div>
	
	<div class="pickadate-box">
		<p class="title">書式を変更</p>
		<input id="pickadateDemo04" class="datepicker" type="text" placeholder="date">
	</div>
	
	<div class="pickadate-box">
		<p class="title">週の初めを設定</p>
		<input id="pickadateDemo06" class="datepicker" type="text" placeholder="date">
	</div>
	
	<div class="pickadate-box">
		<p class="title">日付の範囲指定</p>
		<input id="pickadateDemo07" class="datepicker" type="text" placeholder="date">
	</div>	
</div>

<div class="pickadate-bigbox">
	<p class="title">時間</p>
	<div class="pickadate-box">
		<p class="title">標準の時間表示</p>
		<input id="pickadateDemo08" class="timepicker" type="text" placeholder="time">
	</div>
	
	<div class="pickadate-box">
		<p class="title">表示をカスタム</p>
		<input id="pickadateDemo09" class="timepicker" type="text" placeholder="time">
	</div>
	
	<div class="pickadate-box">
		<p class="title">インターバル</p>
		<input id="pickadateDemo10" class="timepicker" type="text" placeholder="time">
	</div>
	
	<div class="pickadate-box">
		<p class="title">選択不可</p>
		<input id="pickadateDemo11" class="timepicker" type="text" placeholder="time">
	</div>
</div>
<div class="pickadate-box-last"></div>

pickadateについて

pickadateは、入力フォームに日付や時間をピッカーから選択できるUIを簡単に設置できるプラグインです。
ユーザビリティー向上に役立つこと間違いなし。
テーマがdefault,classicと2つあり、上のデモはclassicテーマになっています。defaultは見た目も結構変わるので、試してみてください。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • CharacterCount

    CharacterCount

    入力フォームに文字数制限を設定し、入力可能文字数をリアルタイムで表示する

  • Autosize

    Autosize

    テキストエリアの高さを入力内容に応じて動的に伸縮

  • selectize

    selectize

    inputボックス、selectボックスなどの入力ボックスの使い勝手を向上してくれる

  • Ranger

    Ranger

    スライダーで値を選択できるUIを簡単に設置できる

  • SlidingLabels

    SlidingLabels

    入力フォームのラベルに動きをつける