Simple Date and Time Selector Using Pure JavaScript | dtsel

dtsel is a simplified and easy to implement date and time picker (datetime selector) in regular JavaScript.

How to make use of it:

1. Import the dtsel’s JavaScript and CSS information into the doc.

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

2. Attach a primary date picker to the input field you specify.

<input name="dateTimePicker" />

instance = new dtsel.DTS('input[name="dateTimePicker"]');

3. Show the time choice sliders below the date picker.

instance = new dtsel.DTS('input[name="dateTimePicker"]',  {
  showTime: true
});

4. Hide the date picker.

instance = new dtsel.DTS('input[name="dateTimePicker"]',  {
  showTime: true,
  showDate: false
});

5. Customize the date and time formats.

instance = new dtsel.DTS('input[name="dateTimePicker"]',  {
  dateFormat: "yyyy-mm-dd",
  timeFormat: "HH:MM:SS"
});

6. Determine the path of the date picker.

instance = new dtsel.DTS('input[name="dateTimePicker"]',  {
  direction: 'BOTTOM'
});

7. Customize the calendar view:

instance = new dtsel.DTS('input[name="dateTimePicker"]',  {
  defaultView: "MONTHS"
});

8. Specify the padding of the date picker.

instance = new dtsel.DTS('input[name="dateTimePicker"]',  {
  paddingX: 5,
  paddingY: 5
});

Minimal Date & Time Picker, dtsel Plugin/Github

See Demo And Download