Việc sử dụng datepicker hay datetimepicker khá phổ biến khi phát triển front-end plugins, themes WordPress. Trong thời gian này mình cũng có việc phải sử dụng các dữ liệu dạng này.
Lưu ý: bạn có thể sử dụng nó trong bất cứ form nào tuỳ vào action của bạn chứ không chỉ là metabox nhé!
Cách sử dụng datepicker trong metabox?
Rất đơn giản để sử dụng được datepicker trong WordPress bạn khai báo các thông tin cơ bản như trong hàm sau đây:
function init_metabox_field_offers_date($curentPost,$cutomField,$inputMetaBoxIDAndName,$InputMetaBoxTitle){
wp_enqueue_script( 'jquery-ui-datepicker' );
wp_enqueue_style( 'jquery-ui-style', '//ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/smoothness/jquery-ui.css', true);
?>
<script>
jQuery(document).ready(function(){
jQuery('.offers_date').datepicker({
dateFormat : 'dd/mm/yy'
});
});
</script>
<?php
$xxx=null;
$xxx = get_post_meta( $curentPost->ID, $cutomField, true );
echo '<div class="offers_header_text">'.$InputMetaBoxTitle.'</div>';
echo '<input type="text" name="'.$inputMetaBoxIDAndName.'" class="offers_date" id="'.$inputMetaBoxIDAndName.'" value="'.$xxx.'" />';
}
Ở trên là 1 hàm mình viết sơ bộ để tái sử dụng nhưng chưa tối ưu việc đăng ký scripts và styles trong wp_header(), các bạn sẽ dụng thì lưu ý chỗ này để không dính lỗi hiệu xuất nhé!
Lưu ý: phần hàm JQuery bạn có thể sử lý để date có định dạng theo hệ thống hoặc ý định lưu trữ của bạn nhé! Cả trường hợp nếu dateform > dateto mình cũng chưa check ở đây!
Nhìn qua các bạn cũng hiểu cách sử dụng hàm init_metabox_field_offers_date rồi, ta sẽ sử dụng hàm trên như sau:
init_metabox_field_offers_date($post,'88offers_dateform','88offers_dateform','Ngày bắt đầu'); init_metabox_field_offers_date($post,'88offers_dateto','88offers_dateto','Ngày kết thúc');
Phần hiển thị trường metabox sau đó sẽ như sau khi bạn thêm 1 post mới:
Nguồn bài viết: http://www.designbyhn.se/adding-a-datepicker-to-a-wordpress-metabox/ (thanks so much)