ワードプレスでつかえる datepicker は、とっても簡単につかえて便利なライブラリーです。

javascript は、なれないとデバッグに時間がかかり気持ち的にすごく敷居が高い気がしますがわかってしまえば簡単。

ですが、はまっちゃいました(笑）

wordpress の datepicker の使い方

やるべきことは、日付を入力するフィールドに ID を付けること。
そのフィールドを datepicker に登録してあげる。

具体的には、こんな感じ。

jQuery(document).ready(function ($) {
		$('#vdateas').datepicker ({
			dateFormat: 'yy/mm/dd',
			changeMonth: true,
			changeYear: true,
			yearRange: '-1:+1'
		});
		$('#vdateas').attr('placeholder', '表示開始日');
});

これの ID 部分を書き換えてdatepicker に登録してあげればいい。

２つのフィールドをいれてみると。

jQuery(document).ready(function ($) {
		$('#vdateas').datepicker ({
			dateFormat: 'yy/mm/dd',
			changeMonth: true,
			changeYear: true,
			yearRange: '-1:+1'
		});
		$('#vdateas').attr('placeholder', '表示開始日');
		
		$('#vdatee').datepicker ({
			dateFormat: 'yy/mm/dd',
			changeMonth: true,
			changeYear: true,
			yearRange: '-1:+1'
		});
		$('#vdatee').attr('placeholder', '表示終了日');
});

この例では、placeholder も設定してますが。

では、この登録プログラムをソース上のどこに設置すればいいか。

ここで案外ミスしてしまうのが JQuery をインストールする前にこのソースを吐き出してしまうこと。

つまり、上記の datepicker への登録フィールドの設定は、jQuery のインストール後に展開されないと動かないってこと。

なのでこんな感じで、必ず jQuery のインストール後に展開されるように小技を使います。

// datepickerにフィールドを登録
$java ='';
$java.=push_datepicker('vdateas','表示開始日');
$java.=push_datepicker('vdatee','表示終了日');
　：
push_java($java);

function push_datepicker($fieldid,$plce)
{
	$java_datapicker.= <<<EOD

	$('#$fieldid').datepicker ({
		dateFormat: 'yy/mm/dd',
		changeMonth: true,
		changeYear: true,
		yearRange: '-1:+1'
	});
	$('#$fieldid').attr('placeholder', '$plce');
	
EOD;
	return($java_datapicker);
}

function push_java($java_datapicker)
{
	// $line に展開するソースを代入
	$line ='';
	$line.= <<<EOD
<script type="text/javascript" id="datepickers">
	jQuery(document).ready(function ($) {
EOD;
	$line.= $java_datapicker;
	$line.= <<<EOD
    });
EOD;
	$line.=<<<EOD
</script>
EOD;
	// ダミーの javascriptファイルを使って jQuery のインストールの後ろにアンカーを打ち込む。
	$dUrls = WP_PLUGIN_URL.'/my_system/';

	//ここが味噌。必ず jQuery の下にソースが展開されるようにしてある (array('jquery')部分)
	wp_enqueue_script('myjscript', $dUrls.'js/fillerpadding.js', array( 'jquery' ), false, true  );

	// 打ち込んだ↑アンカーに javascript のソースを展開させる
	wp_add_inline_script('myjscript' , $line, 'after' ) ;

	return($line);
}

これで datepicker を以外とスルっと使えるようになります。

それでも datepicker が特定の項目で動かない。

本日のとりです。

それでもdatepicker が動かない原因は、フィールドのIDにあります。

そのソースの中に同じIDをもったフィールドはありませんか？

私がやってしまったのはこれ。

<form ～ name="form1" id="form1">
	<input type="text" name="vdates" id="vdates">
</form>
　：
<form ～ name="form2" id="form2">
	<input type="text" name="vdates" id="vdates">
</form>

form をコピーして作ったので vdates というIDがダブってるって。。。 orz

一瞬、form 違うからいいべぇ～～とか思ってしまいましたが、id は１つってのはイロハのイ。

お気を付けください。