datepicker cho input html với jquery ui

Thay vì phải nhập ngày tháng một cách vất vả cho các input field thì datepicker sẽ giúp bạn dễ dàng nhập ngày một cách nhanh chóng hơn và chính xác hơn.

Hiện nay có rất nhiều plugin giúp bạn chọn ngày tháng nhanh chóng khi cần nhập ngày tháng cho input html như bootstrap datepicker hay datepicker semantic ui. Tuy nhiên chúng ta sẽ tìm hiểu những plug in datepicker đó ở những bài viết sau. Ở bài viết này chúng ta sẽ cùng tìm hiểu cách sử dụng datepicker của jquery ui.

Thư viện datepicker jquery ui

Bạn có thể sử dụng type=”date” trong html5 để hiển thị datepicker cho input cần nhập ngày tháng tuy nhiên nó hạn chế rất nhiều gây khó khăn cho tuỳ biến theo nhu cầu của bạn. Vì vậy chúng ta sẽ cần đến sự giúp đỡ của thư viện jquery ui datepicker cho input nhập ngày tháng. Và để chạy được thư viện jquery ui datepicker chúng ta cần đến jquery mà bạn có thể tải tại đây hoặc dùng trực tiếp đoạn code bên dưới.

<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>

Sau khi khi đã có jquery bạn tải thư viện jquery ui datepicker về tại https://jqueryui.com/download/all/. Bạn bỏ jquery và jquery ui trong phần header hoặc footer của html layout.

Và cũng đừng quên đính css kèm theo để có thể hiển thị đủ và đẹp cho datepicker nhé.

<link rel="stylesheet" href="../jquery-ui-1.13.2/jquery-ui.min.css">
<script src="../jquery-ui-1.13.2/jquery-ui.min.js"></script>

Thiết lập jquery datepicker ui

Code html input hiển thị datepicker

Để hiển thị được chức năng datepicker thì bạn viết đúng code và đặt đúng vị trí như dưới đây.

<div class="form-group">
    <input type="text" id="date" class="form-control datepicker" name="dateSearch" value="" placeholder="Search date" autocomplete="off">
    <span style=" color: #aaa; margin-left: -22px; margin-top: 7px; z-index: 1;">   
        <i class="far fa-calendar-alt"></i>
    </span>
</div>
<!-- /.input group -->

Ở đoạn code trên bạn lưu ý class datepicker vì class này được đặt trong thẻ input để giúp thư viện jquery ui hiểu được vị trí cần hiển thị lịch cho bạn chọn ngày tháng sau khi thêm đoạn javascript bên dưới.

$(function() {
    $('.datepicker').datepicker( {
        changeDay: true,
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'yyyy-mm-dd',
        yearRange: "-100:+0",
        onClose: function(dateText, inst) { 
            $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay, 1));
        }
    });
});

Nếu chỉ muốn hiển thị mỗi năm và tháng trong datepicker jquery ui thì bạn sử dụng đoạn script sau

$(function() {
    $('.monthpicker').datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
		beforeShow: function (e, t) {
            $(this).datepicker("hide");
            $("#ui-datepicker-div").addClass("hide-calendar");
        },
        onClose: function(dateText, inst) { 
            $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
        }
    });
});

Trường hợp bạn sử dụng 2 input để làm chứ năng chọn ngày bắt đầu và ngày kết thúc cho chức năng tìm kiếm theo ngày thì có thể sử dụng

//Start date picker
$(function() {
    $('.datepicker_start').datepicker( {
        changeDay: true,
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'yy-mm-dd 00:00:00',
        yearRange: "-100:+0",
        onClose: function(dateText, inst) { 
            $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay, 1));
        }
    });
});
//End date picker
$(function() {
    $('.datepicker_end').datepicker( {
        changeDay: true,
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'yy-mm-dd 23:59:59',
        yearRange: "-100:+0",
        onClose: function(dateText, inst) { 
            $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay, 1));
        }
    });
});

Hoặc làm theo hướng dẫn của jquery ui như bên dưới

$( function() {
    var dateFormat = "mm/dd/yy",
      from = $( "#from" )
        .datepicker({
          defaultDate: "+1w",
          changeMonth: true,
          numberOfMonths: 3
        })
        .on( "change", function() {
          to.datepicker( "option", "minDate", getDate( this ) );
        }),
      to = $( "#to" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3
      })
      .on( "change", function() {
        from.datepicker( "option", "maxDate", getDate( this ) );
      });
 
    function getDate( element ) {
      var date;
      try {
        date = $.datepicker.parseDate( dateFormat, element.value );
      } catch( error ) {
        date = null;
      }
 
      return date;
    }
  } );
  </script>

Vậy là bạn đã có được chức năng datepicker siêu đẹp với sự hỗ trợ của jquery ui. Bạn có thể xem thêm tại đây để thiếp lập cho phù hợp với nhu cầu của mình.