Datepicker Datetimepicker


datepicker để hiển thị lịch chọn ngày/tháng/năm, trong khi datetimepicker để lựa chọn giá trị có format như HH:mm:ss DD/MM/YYYY"
Cài đặt:
 <script src="${contextURL}resources/js/libs/jquery.js"></script>
<script type="text/javascript" src="${contextURL}resources/js/moment-with-locales.min.js"></script>
<script type="text/javascript" src="${contextURL}resources/js/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="${contextURL}resources/js/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" media="screen" href="${contextURL}resources/css/bootstrap.min.css" />
<link rel="stylesheet" media="screen" href="${contextURL}resources/js/bootstrap/css/bootstrap-datetimepicker.min.css" />
<script src="${contextURL}resources/js/jquery/jquery-ui-1.12.1.js"></script>

Cách sử dụng:

<script type="text/javascript">
            $(document).ready(function(){
               
                $('#fromDate').datepicker({
                    dateFormat: 'dd/mm/yy',
                    showOn: "button",
                    buttonImage: "${contextURL}resources/images/calendar.gif",
                    buttonImageOnly: true,
                    changeYear: true,
                    closeText: "Đóng",
                    prevText: "Trước",
                    nextText: "Sau",
                    currentText: "Hôm nay",
                    monthNames: ["Tháng một", "Tháng hai", "Tháng ba", "Tháng tư", "Tháng năm", "Tháng sáu", "Tháng bảy", "Tháng tám", "Tháng chín", "Tháng mười", "Tháng mười một", "Tháng mười hai"],
                    monthNamesShort: ["Một", "Hai", "Ba", "Bốn", "Năm", "Sáu", "Bảy", "Tám", "Chín", "Mười", "Mười một", "Mười hai"],
                    dayNames: ["Chủ nhật", "Thứ hai", "Thứ ba", "Thứ tư", "Thứ năm", "Thứ sáu", "Thứ bảy"],
                    dayNamesShort: ["CN", "Hai", "Ba", "Tư", "Năm", "Sáu", "Bảy"],
                    dayNamesMin: ["CN", "T2", "T3", "T4", "T5", "T6", "T7"],
                    weekHeader: "Tuần",
                    dateFormat: "dd/mm/yy",
                    firstDay: 1,
                    isRTL: false,
                });
                $('#toDate').datepicker({
                    dateFormat: 'dd/mm/yy',
                    showOn: "button",
                    buttonImage: "${contextURL}resources/images/calendar.gif",
                    buttonImageOnly: true,
                    changeYear: true,
                    closeText: "Đóng",
                    prevText: "Trước",
                    nextText: "Sau",
                    currentText: "Hôm nay",
                    monthNames: ["Tháng một", "Tháng hai", "Tháng ba", "Tháng tư", "Tháng năm", "Tháng sáu", "Tháng bảy", "Tháng tám", "Tháng chín", "Tháng mười", "Tháng mười một", "Tháng mười hai"],
                    monthNamesShort: ["Một", "Hai", "Ba", "Bốn", "Năm", "Sáu", "Bảy", "Tám", "Chín", "Mười", "Mười một", "Mười hai"],
                    dayNames: ["Chủ nhật", "Thứ hai", "Thứ ba", "Thứ tư", "Thứ năm", "Thứ sáu", "Thứ bảy"],
                    dayNamesShort: ["CN", "Hai", "Ba", "Tư", "Năm", "Sáu", "Bảy"],
                    dayNamesMin: ["CN", "T2", "T3", "T4", "T5", "T6", "T7"],
                    weekHeader: "Tuần",
                    firstDay: 1,
                    isRTL: false,
                });               
                            });
            </script>