只需要 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:"<上月", nextText:"下月>", 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