HTML5 Date And Time Picker

There are lots of ways to get date and time input from user. Traditionally developers used select inputs to get date and time. Later developers integrate date/time picker from 3rd party js tools like : https://www.jqueryscript.net/demo/Clean-jQuery-Date-Time-Picker-Plugin-datetimepicker/

But now this is become very easy to handle date-time as default input type of HTML5. In this method we can just declare the input element and in type attribute just put date or time. That's it. No need to import jquery plugins or no need to specify them using lots of select input. How you can do it?

Just follow the below code:

<input type="date" name="dob" />
<!--Plain Date Input-->

<input type="date" name="book" value="2023-10-26" min="2023-10-01" max="2023-10-30" />
<!--Set Limit-->

 <input type="time" name="time" />
<!--Plain Time Input-->   
        
 <input type="datetime-local" name="datetime" />
<!--Both Date and time Input-->

Here is the output:

Date Input

Time Input

Date Input With Limit

Date And Time Input Together

Following browsers will support this format of code. I think this will be helpful for you and solve your problem. Happy coding!

HTML5 Date And Time Picker

Leave your Comment

Recent Blogs

How to force redirect URL from HTTP to HTTPS?

How to hide .php from the URL?

Date preview like facebook time ago using PHP

Compressing Image Size Using PHP

Format Number Like Facebook Counter Using PHP

Watermark using PHP

Custom Font Facing

File Upload Using PHP

How to iconize your website

All Categories