WickecdPickerで複数入力ボックスの移動時ダイアログをhideする

テキストボックスをフォーカスすると時刻入力を補助してくれる
JqueryプラグインのWickedPicker。

他にも色々ありますが、UIの感じが好きでこれを使ってます。

【参考】
日付・時刻入力を手助けしてくれるデートピッカー・タイムピッカーを実装できるスクリプト 15【本家サイト】
Wickedpicker
GitHub

ただ、このWickedPickerのUX的にイケてないところは
どこかのテキストで、Pickerを開いている状態で
テキストを移動しても、Pickerが消えないという点。

DEMO通りに使う場合
【HTML】

<input type="text" name="timepicker" class="timepicker"/>

【javascript】

var timepicker = $('.timepicker').wickedpicker();

基本はこんな感じ。
で、テキストボックスのフォーカスが移動した際、
Pickerを消したり、再表示したりする処理を追記

$(.timepicker).on('click focus blur', function(e){
    $(.timepicker).wickedpicker('hide');
});
var timepicker = $('.timepicker').wickedpicker();

wickedpickerを定義する前にフォーカス関連の
処理を定義しておきます。

やってることは、wickedPickerを全部消してるだけです。
消した後、表示される感じですね。

前で定義した理由は、あとから定義すると、
表示した後に消しちゃうから。

ちなみに、余談ですが、
テキストボックスのデフォルト値をPickerに反映させたり
Stepなんかも<input>側で指定する運用をしたいので
いつもこんな感じで使ってます。
入力ボックス2つの例です。

【HTML】

<pinput name="start" type="text" class="timepicker" wicked-step="5" value="09:00"/>
<pinput name="end" type="text" class="timepicker" wicked-step="5" value="18:00"/>

【javascript】

$('.timepicker').on('click focus blur', function(){
	$('.timepicker').wickedpicker('hide');
});
$( '.timepicker' ).each( function(){
	$(this).wickedpicker({
		twentyFour: true,
		now: $(this).val(),
		minutesInterval: $(this).attr('wicked-step')
	});
});

カテゴリー:javascriptjquery

masa