Press "Enter" to skip to content

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.

date and time picker bs, date time picker, date time picker javascript, jquery datetimepicker, jquery date and time picker example code, date time picker html

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, javascript time picker

Simple-Date-and-Time-Selector-Demo


See Demo And Download

Official Website(crossxcell99): Click Here

This superior jQuery/javascript plugin is developed by crossxcell99. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *