Beautiful Datetime Picker With jQuery And Moment.js

Yet another date & time picker plugin which appends a pretty nice, multi-language date and time selection popup to a hidden input field using jQuery and moment.js JavaScript libraries.

How to use it:

1. Import the necessary jQuery and moment.js libraries into your html document.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/moment-with-locales.min.js"></script>

2. Import the Datetime Picker's JavaScript and Stylesheet into the document.

<link href="css/datetimepicker.css" rel="stylesheet">
<script src="js/datetimepicker.js"></script>

3. Create a DIV container and a hidden input for the datetime picker.

<div id="picker"> </div>
<input type="hidden" id="result" value="">

4. Enable the datetime picker.

$('#picker').dateTimePicker();

5. Set the date format.

$('#picker').dateTimePicker({
  dateFormat: "YYYY-MM-DD HH:mm"
});

6. Change the default language.

$('#picker').dateTimePicker({
  locale: 'en'
});

7. Enable/disable the time picker.

$('#picker').dateTimePicker({
  showTime: true
});

8. More configuration options.

$('#picker').dateTimePicker({
  selectData: "now",
  positionShift: { top: 20, left: 0},
  title: "Select Date and Time",
  buttonTitle: "Select"
});

Changelog:

2020-12-27

• CSS Updated

---

This awesome jQuery plugin is developed by polozin. For more Advanced Usages, please check the demo page or visit the official website.