WordPress教學 – 日期欄位的挑選器 Datepicker

Posted in :

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

 

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

https://jqueryui.com/


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碼。 @_@;


Add Id “date” to input field.

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

 


相關文章:

jQuery UI Autocomplete for Search field in WordPress
http://stackoverflow.com/questions/42717105/jquery-ui-autocomplete-for-search-field-in-wordpress

jQuery UI Datepicker 示例(三)
http://wiki.jikexueyuan.com/project/jquery-tutorial/jquery-ui-datepicker-example-three.html

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *