Easy Date & Time Dropdown Selector Plugin - dateTimeSelector

Just another jQuery date & time picker plugin which converts the normal input fields into several separated date and time dropdown select elements. The plugin provides a simple and convenient way to input dates & times in your web applications such like DOB picker.

See also:

• User-friendly Date & Time Picker Plugin With jQuery - dateSelector
• Minimalist jQuery Plugin For Birthday Selector - DOB Picker
• Customizable Dropdown Birthday Picker Plugin with jQuery

Basic usage:

1. Link to the required JavaScript files as follows:

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.datetimeselector.min.js"></script>

2. Create a regular input field for the date & time selector.

<input type="text" id="example" name="example">

3. Invoke the plugin on the input field.

$("#example").dateTimeSelector();

4. That's it. You can style the date & time picker using your own CSS or any other CSS framework. You can also customize the date & time selector with the following options.

$("#example").dateTimeSelector({
  // Format options
  // Y - year, m - month, d - day, H - hour, i - minute, s - second
  format : 'Y-m-d H:i:s',

  // Container options
  sectionTag : '',
  sectionClass : '',
  sectionDateTag : '',
  sectionDateClass : '',
  sectionTimeTag : '',
  sectionTimeClass : '',

  // Year options
  yearDefault : 'Select year',
  yearValue : (new Date).getFullYear(),
  yearMin   : (new Date).getFullYear()-5,
  yearMax   : (new Date).getFullYear()+5,
  yearClass : '',

  // Month options
  monthDefault : 'Select month',
  monthValue : '',
  monthNames : {
    1 : 'January',
    2 : 'February',
    3 : 'March',
    4 : 'April',
    5 : 'May',
    6 : 'June',
    7 : 'July',
    8 : 'August',
    9 : 'September',
    10 : 'October',
    11 : 'November',
    12 : 'December'
      },
  monthClass : '',

  // Day options
  dayDefault : 'Select day',
  dayValue : '',
  dayClass : '',

  // Hour options
  hourDefault : 'Select hour',
  hourValue : '',
  hourClass : '',

  // Minute options
  minuteDefault : 'Select minute',
  minuteValue : '',
  minuteClass : '',

  // Second options
  secondDefault : 'Select second',
  secondValue : '',
  secondClass : ''
});

---

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