シェアする

  • このエントリーをはてなブックマークに追加

[Bootstrap]bootstrap-datepickerを追加要素でも機能させる

bootstrap-datepickerは以下のように通常の記述で実行しようとすると、動的に追加された要素では機能しません。

$('.date-picker').datepicker();

以下のようにすると動的要素でも機能します。

$(document).on('click', 'date-picker', function(){
	$(this).datepicker();
	$(this).datepicker('show');
});

ちなみに以下はボクがよく書く記述です。スニペット的に書いておきます。

$(document).on('click', '.date-picker', function(){
	$(this).datepicker({
		format: 'yyyy-mm-dd',
		autoclose: true,
		language: 'ja'
	}).next().on(ace.click_event, function(){
		$(this).prev().focus();
	});
	$(this).datepicker('show');
});

formatはDBに合わせて、autocloseは選択後自動的に閉じたいのでtrueに、languageは、日本語のbootstrap-datepicker.ja.jsを読み込んだ上でjaにします。

その後に続く.next()以下は、bootstrapの記述でインプットにアイコンをaddonたときにアイコンクリックでもdatepickerが動くようにするためです。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする