フロントエンドでdatepickerを使う方法

必要なjsやcssを読み込む

wp_enqueue_script('jquery-ui-datepicker');
wp_enqueue_style('jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css');

datepickerにしたいfieldにidを振って、それを指定する

jQuery(document).ready(function() {
jQuery('#release_date').datepicker({
dateFormat : 'yy-mm-dd'
});
});

日本語表示にしたければ以下もいれる。どこかから探して以来、使っているコード

<script>
/* Japanese initialisation for the jQuery UI date picker plugin. */
/* Written by Kentaro SATO (kentaro@ranvis.com). */
jQuery(function($){
$.datepicker.regional['ja'] = {
closeText: '閉じる',
prevText: '&#x3c;',
nextText: '&#x3e;',
currentText: '今日',
monthNames: ['1月','2月','3月','4月','5月','6月',
'7月','8月','9月','10月','11月','12月'],
monthNamesShort: ['1月','2月','3月','4月','5月','6月',
'7月','8月','9月','10月','11月','12月'],
dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
dayNamesShort: ['日','月','火','水','木','金','土'],
dayNamesMin: ['日','月','火','水','木','金','土'],
weekHeader: '週',
dateFormat: 'yy/mm/dd',
firstDay: 0,
isRTL: false,
showMonthAfterYear: true,
yearSuffix: '年'};
$.datepicker.setDefaults($.datepicker.regional['ja']);
});
</script>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です