jquery datetimepicker example code with code examples

jQuery Datetimepicker is a popular plugin that provides an easy way to add a date and time picker to your web page. It is built using the jQuery library, and it is highly customizable to meet your specific requirements. In this article, we will cover everything you need to know to use the jQuery Datetimepicker plugin in your web project, including the installation process, usage, and code examples.

Installation

There are two ways to install the jQuery Datetimepicker plugin:

Download the plugin from the official website and link it to your web page.
Include the plugin from a CDN (Content Delivery Network) in your web page.

The first method is recommended if you want to use a specific version of the plugin or if you need to make changes to the source code. To download the plugin, go to the official website (http://trentrichardson.com/examples/timepicker/), click on the "Download" button, and extract the files to your local machine.

Link the plugin to your web page by adding the following code to the head section of your HTML file:

<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>

The second method is the easiest and quickest way to get started with the plugin. To include the plugin from a CDN, add the following code to the head section of your HTML file:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>

Usage

The jQuery Datetimepicker plugin provides a date and time picker to any HTML element on your web page. To use the plugin, you need to call the datetimepicker() method on the element you want to apply the picker to.

For example, if you have a text input field with the id "date", you can apply the picker to it as follows:

<input type="text" id="date"/>

<script type="text/javascript">
$(document).ready(function() {
  $('#date').datetimepicker();
});
</script>

Once you apply the picker to an element, a calendar icon will appear next to the field, and when you click on it, the date and time picker will be displayed.

Options

The jQuery Datetimepicker plugin provides a variety of options that allow you to customize the appearance and behavior of the picker. Some of the most commonly used options include:

format
timepicker: Specifies whether to display the time picker or not. If set to false, only the date picker will be displayed.
datepicker: Specifies whether to display the date picker or not. If set to false, only the time picker will be displayed.
minDate: Specifies the minimum date that can be selected in the picker.
maxDate: Specifies the maximum date that can be selected in the picker.
minTime: Specifies the minimum time that can be selected in the picker.
maxTime: Specifies the maximum time that can be selected in the picker.
step: Specifies the step for the time picker in minutes.
dayOfWeekStart: Specifies the first day of the week.
closeOnDateSelect: Specifies whether to close the picker when a date is selected.

Here is an example of how to use the options to customize the picker:

<input type="text" id="date"/>

<script type="text/javascript">
$(document).ready(function() {
  $('#date').datetimepicker({
    format: 'Y-m-d H:i',
    timepicker: true,
    datepicker: true,
    minDate: '-1970/01/02',
    maxDate: '+1970/01/02',
    minTime: '10:00',
    maxTime: '20:00',
    step: 30,
    dayOfWeekStart: 1,
    closeOnDateSelect: true
  });
});
</script>

Events

The jQuery Datetimepicker plugin provides several events that you can use to perform actions when certain actions occur in the picker. Some of the most commonly used events include:

onShow: Triggered when the picker is shown.
onHide: Triggered when the picker is hidden.
onChangeMonth: Triggered when the month in the picker is changed.
onChangeYear: Triggered when the year in the picker is changed.
onChangeDateTime: Triggered when the date and time in the picker are changed.

Here is an example of how to use the events to perform actions:

<input type="text" id="date"/>

<script type="text/javascript">
$(document).ready(function() {
  $('#date').datetimepicker({
    onShow: function() {
      console.log('The picker is shown');
    },
    onHide: function() {
      console.log('The picker is hidden');
    },
    onChangeMonth: function(current, $input) {
      console.log('The month is changed to ' + current.getMonth());
    },
    onChangeYear: function(current, $input) {
      console.log('The year is changed to ' + current.getFullYear());
    },
    onChangeDateTime: function(current, $input) {
      console.log('The date and time are changed to ' + current.toString());
    }
  });
});
</script>

Conclusion

Popular questions

What is the jQuery Datetimepicker plugin?

The jQuery Datetimepicker plugin is a popular and widely-used plugin that allows you to easily add a date and time picker to your web pages. It is built on top of the jQuery library and provides a user-friendly interface for selecting dates and times.

How do you include the jQuery Datetimepicker plugin in your web page?

To include the jQuery Datetimepicker plugin in your web page, you need to include the following files:

The jQuery library
The jQuery Datetimepicker plugin
The CSS file for the plugin

You can include the files in the head section of your HTML file like this:

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="jquery.datetimepicker.full.js"></script>
  <link rel="stylesheet" href="jquery.datetimepicker.css">
</head>

How do you use the jQuery Datetimepicker plugin in your web page?

To use the jQuery Datetimepicker plugin, you need to first create an input field in your HTML file and then initialize the plugin on that field using JavaScript.

Here is an example of how to use the plugin:

<input type="text" id="date"/>

<script type="text/javascript">
$(document).ready(function() {
  $('#date').datetimepicker();
});
</script>

What are some of the options that you can use to customize the picker?

The jQuery Datetimepicker plugin provides several options that you can use to customize the picker, such as the format of the date and time, the minimum and maximum dates and times that can be selected, and the step for the time picker. Some of the most commonly used options include:

format: Specifies the format of the date and time to be displayed in the picker.
timepicker: Specifies whether to display the time picker or not.
datepicker: Specifies whether to display the date picker or not.
minDate: Specifies the minimum date that can be selected in the picker.
maxDate: Specifies the maximum date that can be selected in the picker.

What are some of the events that you can use to perform actions when certain actions occur in the picker?

The jQuery Datetimepicker plugin provides several events that you can use to perform actions when certain actions occur in the picker, such as when the picker is shown, hidden, or when the month or year in the picker is changed. Some of the most commonly used events include:

onShow: Triggered when the picker is shown.
onHide: Triggered when the picker is hidden.
onChangeMonth: Triggered when the month in the picker is changed.
onChangeYear: Triggered when the year in the picker is changed.

Tag

Datetimepicker.