close
If you are looking for a jQuery plugin to add date-time picker to input field, this article will help you lot for that. DateTimePicker jQuery plugin is very simple and easy to implement. Also, this plugin provides various options to customize your Date-Time Picker as per your project needs.
This tutorial shows the simplest way to add date time picker with minimal JavaScript code. Here two types of date-time picker would be demonstrated. One will be appearing on clicking the input field and another would be displayed inline.
Before using jQuery DateTimePicker, include the jQuery library.
<script src="jquery.min.js"></script>
Now include the js and css files of DateTimePicker plugin. This js file should go after the <body> tag.
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/> <script src="jquery.datetimepicker.full.js"></script>
<input type="text" id="datetimepicker"/>
$('#datetimepicker').datetimepicker({ format:'Y-m-d H:i', });
Inline DateTimePicker:
$('#datetimepicker').datetimepicker({ format:'Y-m-d H:i', inline:true });
Most commonly used customization options are provided below.
MinDate & MaxDate:
$('#datetimepicker3').datetimepicker({ format:'Y-m-d H:i', minDate:'2016-04-05', maxDate:'2016-04-28' });
For today use minDate:0.
MinTime & MaxTime:
$('#datetimepicker4').datetimepicker({ format:'Y-m-d H:i', minTime:'09:00', maxTime:'20:00' });
For today use minTime:0.
Step time:
$('#datetimepicker5').datetimepicker({ format:'Y-m-d H:i', step:15 });
On Select Date:
$('#datetimepicker6').datetimepicker({ format:'Y-m-d H:i', onSelectDate:function(current_time, $input){ var selectedDate = $input.val(); alert(selectedDate); } });
On Select Time:
$('#datetimepicker7').datetimepicker({ format:'Y-m-d H:i', onSelectTime:function(current_time, $input){ var selectedDate = $input.val(); alert(selectedDate); } });
The main purpose of this tutorial is to provide the instant way to add date-time picker to input form field. You can see the full options lists from the plugin page.
Do you want to get implementation help, or enhance the functionality of this script? Click here to Submit Service Request
Thank you so much for such a wonderful calendar demo
could you please help me in how to print the date chosen below the text box
Hi!
How do I change language in datetimepicker?
Rgds