Yet another awesome jQuery date and time picker with CSS3 stylish calendar widget. The plugin generates beautiful calendar in specific container (div/input) dynamically. So, users can easily pick both time and date from that calendar.
The plugin allow to set start & end date, language and date format (e.g YM | YMD | YMDHMS | HMS). Moreover, you can execute custom callback functions.
Plugin Overview
| Plugin: | Perfect Date Time Picker |
| Author: | Jiandaoyun |
| Licence: | MIT Licence |
| Published: | January 20, 2024 |
| Repository: | Fork on GitHub |
| Dependencies: | jQuery 1.3.1 or Latest version |
| File Type: | zip archive (HTML, CSS & JavaScript ) |
| Package Size: | 66.3 KB |
How to Use jQuery Date and Time Picker
1. First of all load jQuery and Perfect-DateTimePicker ‘s CSS and JavaScript file into your webpage.
<!-- jQuery --> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!-- Perfect-DateTimePicker CSS --> <link rel="stylesheet" type="text/css" href="css/jquery.datetimepicker.css"/> <!-- Perfect-DateTimePicker JS --> <script type="text/javascript" src="src/jquery.datetimepicker.js"></script>
2. In the next step, create a div element with a unique id in which your date and time picker will be loaded dynamically.
<div id="myDatePicker"></div>
3. Finally, initialize the plugin in jQuery document ready function with all default settings.
$(document).ready(function(){
$('#myDatePicker').datetimepicker();
});
Advance Configuration Options for Date & Time Picker
The following are some advance configuration options to create / customize “perfect date & time picker”.
| Option | Description, Default, Type |
|---|---|
language |
This option define the language for date picker. Default: ‘en’, Type: String.
$('#myDatePicker').datetimepicker({
language: 'en',
});
|
viewMode |
It define the view mode for date and time picker. Default: Type: String.
$('#myDatePicker').datetimepicker({
viewMode: 'YM',
});
|
firstDayOfWeek |
The first day Of week (e.g 1 to 6 Sunday to Saturday). default: 0, Type: Number.
$('#myDatePicker').datetimepicker({
firstDayOfWeek: 3,
});
|
onDateChange |
Custom callback function to run on date change. Default: null, Type: Function.
$('#myDatePicker').datetimepicker({
onDateChange: function(){
// code to run
}
});
|
onClear |
Custom callback function to run on clear selected date. Default: null, Type: Function.
$('#myDatePicker').datetimepicker({
onClear: function(){
// code to run
}
});
|
onOk |
Callback function to run on ok button click event. Default: null, Type: Function.
$('#myDatePicker').datetimepicker({
onOk: function(){
// code to run
}
});
|
onClose |
Callback function to run on close button click event. Default: null, Type: Function.
$('#myDatePicker').datetimepicker({
onClose: function(){
// code to run
}
});
|
Similar Code Snippets:
Gaming Clock UI Using SVG CSS and JavaScript
JavaScript Stopwatch with Milliseconds
Realistic Casio F-91w Watch in JavaScript
jQuery Datepicker for Bootstrap 4 - WBN Datepicker
jQuery Datepicker to Pick Year Only - YearPicker.js
Vanilla JavaScript Stop Watch with Milliseconds
jQuery Datepicker with dd-mm-yyyy Date Format
Beautiful 3D Analog Clock Widget In HTML
Pomodoro Clock Widget in HTML
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.