Simplest way to add cross browser jQuery date and time picker in web page

  •  
  •  
  •  
  •  
  •  
  •  

In this tutorial, I will show you how to add cross browser jQuery date and time picker in the web page. It is a plugin, and it is very simple and easy to implement. Also, this jQuery datetimepicker plugin provides various options to customize datetimepicker as per your requirements. This tutorial helps you to add jQuery date and time picker with very few line of javascript code.

Please download the latest version of jQuery date and time picker plugin from here jquery.com or you can find a copy of this plugin inside the source code.

Simplest way to add cross browser jQuery date and time picker in web page

Before you start using jQuery date and time picker, you have to include two JS files and one CSS file into the <head> section.

<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.min.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.datetimepicker.full.min.js"></script>

One line HTML code

<input type="text" value="" id="datetimepicker" />

One line JavaScript code

It is the simplest way to add or initialize the jQuery date and time picker into your web page.

$('#datetimepicker').datetimepicker();

Simplest way to add cross browser jQuery date and time picker in web page

Other configurable options

The following options are most commonly used in jQuery date and time picker plugin.

Default Starting Date 

$('#datetimepicker2').datetimepicker({value:'2016/01/01 08:00:00',step:30});

By default 2016/01/01 08:00:00 will display in the text field. step:30, sets the gap or interval between two consecutive times is 30 minutes.

Disable Dates

$('#datetimepicker').datetimepicker({
  dayOfWeekStart : 1,
  lang:'en',
  disabledDates:['2017/09/12','2017/09/13','2017/09/14'],
  startDate:	'2017/09/01'
});

You can disable date(s) by using disableDates option. If you want to change the default start day of the week then use dayOfWeekStart option.

Display Date Picker Only

$('#datetimepicker').datetimepicker({
  timepicker:false,
  format:'d/m/Y'
});

You can display date picker only by using timepicker:false option. By using format option you can change the date format.

Display Time Picker Only

$('#datetimepicker').datetimepicker({
  datepicker:false,
  step:30,
  format:'H:i'
});

datepicker:false option disables the datepicker, it only shows the time picker. Like the date, you can change the time format also by using format option.

Set Range of Enabled Dates

$('#datetimepicker').datetimepicker({
  timepicker:false,
  format:'Y/m/d',
  minDate:'-1970/01/02', // Yesterday is minimum date
  maxDate:'+1970/01/02' // Tommorow is maximum date
});

You can set the range of enabled dates by using minDate and maxDate options.

Mask the Date and Time Picker

$('#datetimepicker').datetimepicker({
  mask:'0000/00/00 00:00'
});

Allowed Times for Time Picker

$('#datetimepicker').datetimepicker({
  allowTimes:['01:00','03:00','05:00','07:00','09:00','11:00','13:00','15:00','17:00'],
});

If you want to show some particular dates only in the time picker then use allowTimes option.

Disable Weekends

$('#datetimepicker').datetimepicker({
    onGenerate:function(ct){
        $(this).find('.xdsoft_date.xdsoft_weekend').addClass('xdsoft_disabled');
    },
    timepicker:false,
    format:'d/m/Y'
});

The above code will disable all the weekends of the calendar.

Disable Particular Date From Today

var disable_date = new Date();
disable_date.setDate(disable_date.getDate() + 7);
$('#datetimepicker').datetimepicker({
  beforeShowDay: function(date) {
    if (date.getMonth() == disable_date.getMonth() && date.getDate() == disable_date.getDate()) {
      return [false, ""]
    }
    return [true, ""];
  }
});

You can disable a particular date from today. For example, if today is 09/09/2017 then the above code will disable the date 16/09/2017.

Inline Date and Time Picker

$('#datetimepicker').datetimepicker({
  inline:true
});

inline:true option always displays the jQuery date and time picker, no need to click on the text field to display the jQuery date and time picker.

Change Theme of the jQuery Date and Time Picker

$('#datetimepicker').datetimepicker({
  theme:'dark'
});

You can use theme:’dark’ option to change the default theme of the jQuery date and time picker.

Hope you enjoyed the tutorial. You can download the complete source code from the below download link and please like and share the tutorial link to others.

About Mitrajit

One thought on “Simplest way to add cross browser jQuery date and time picker in web page

Leave a Reply

Your email address will not be published. Required fields are marked *

Prove you are a human *