Bạn đã sử dụng thành thạo date input trong HTML5 chưa ?

HTML5 có một thẻ đặc biệt dành cho việc select ngày tháng là

Kết quả mà chúng ta nhận được trên trình duyệt sẽ như sau

date input trong html5

Hầu hết các ứng dụng mà chúng ta làm đều sử dụng các plugin bên ngoài để tạo datepicker vì đẹp và dễ sử dụng hơn nhiều. Chính vì vậy mà khi đối mặt với control này, nhiều bạn tỏ ra lúng túng không biết xử lý ra sao. Bài viết sau đây sẽ giúp bạn giải quyết vấn đề này

1. Set giá trị một ngày cụ thể

Để set giá trị một ngày cụ thể, bạn phải sử dụng format dạng YYYY-MM-DD

Chú ý nhỏ : thuộc tính placeholder sẽ không sử dụng được đối với control date này

2. Giá trị min max của ngày tháng

Bạn có thể sử dụng thuộc tính min, max để thiết lập giá trị được phép chọn của ngày tháng

Trong câu lệnh trên, tôi chỉ cho phép người dùng nhập giá trị trong tháng 9/2017. Vậy output của câu lệnh trên sẽ như thế nào

Nếu trong tháng, bạn chỉ muốn có một số ngày cụ thể được chọn thì bổ sung thêm thuộc tính step. Ví dụ 1/9/2017 (min date) là thứ 6, nếu đặt step là 7 thì có nghĩa là chỉ cho phép chọn ngày tháng vào thứ 6 mà thôi

date input trong html5

3.Mặc định chọn ngày hôm nay

Cho đến thời điểm hiện tại, control này chưa có thuộc tính nào để mặc định thiết lập chọn ngày hôm nay cả. Bạn buộc phải sử dụng javascript như sau

Hoặc

4. Chọn tuần, tháng thay vì chỉ chọn ngày

Điều này hoàn toàn được và rất đơn giản

Nếu bạn muốn chọn cả thời gian thì sửa thuộc tính type thành datetime-local

Nếu muốn chọn mỗi thời gian thì set type=”time”