Datetimepicker is a modern, clean, and easily accessible DateTime picker jquery plugin that creates a simple selectable date and time popup when clicking on an input field. It has various options/methods to modify the plugin and its features according to your needs.

Features:

• Simple and easy to implement.
• Supports date and time picker both at the same time.
• Options to show date and time separately.
• Option to add input mask.
• Callback events support.

Installation

npm install jquery-datetimepicker

yarn add jquery-datetimepicker

How to use it:

1. Include the Javascript jquery.datetimepicker.full.min.js at the bottom of the web page.

<script src="path/to/jquery.datetimepicker.full.min.js"></script>

2. Include the CSS jquery.datetimepicker.css in the header of the page.

<link rel="stylesheet" href="path/to/jquery.datetimepicker.css">

3. Add the basic HTML to the page.

<input type="text" value="" placeholder="yyyy/mm/dd hh:mm" id="datetimepicker"/>

4. Initialize the plugin and we're ready to go.

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

<input type="text" value="" placeholder="yyyy/mm/dd hh:mm" id="datetimepicker"/>

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

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

$('#datetimepicker_mask').datetimepicker({
  mask:'9999/19/39 29:59'
});

<input type="text" placeholder="dd/md/YYYY" id="DatePicker"/>

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

<input type="text" placeholder="HH:II" id="TimePicker"/>

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

<input type="text" id="datetimepicker3"/>
<input class="btn btn-primary" type="button" onclick="$('#datetimepicker3').datetimepicker({value:'2011/12/11 12:00'})" value="set inline value 2011/12/11 12:00"/>

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