1. 程式人生 > >日期欄位的挑選器 Datepicker

日期欄位的挑選器 Datepicker

只需要 2個步驟, 就可以讓網頁的輸入框(text) 下方多彈出日期的挑選器。只是,預設彈出來的是英文版日歷,再加一些引數就可以變成中文版日曆。

這個範例使用到 jqueryui, 官方網站:

First write following code in template file. These code will include js and datepicker class in the template.

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

Write following php code in functions.php for date field. Or you can also write this code in template file.

<script type="text/javascript">
jQuery(document).ready(function(){
 jQuery('#atm_datetime').datepicker({
 dateFormat: 'yy-mm-dd',
 dayNames:["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
 dayNamesMin:["日","一","二","三","四","五","六"],
 monthNames:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
 monthNamesShort:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
 prevText:"&#x3C;上月",
 nextText:"下月&#x3E;",
 firstDay: 1,
 isRTL: false,
 showMonthAfterYear: true,
 yearSuffix: '年',
 weekHeader:"週"
 });
});

</script>

這裡比較特別的是隻能用 2個 yy, 用 4個 yy 會變成 20172017 變8碼。 @[email protected];

Add Id “date” to input field.

 <input id="date" name="date" />

相關文章: