### UI DATE & TIME PICKER

jQuery Air Datepicker

Air Datepicker is a lightweight cross-browser jQuery datepicker. View on Github.

Datepicker will automatically initialize on elements with class `.datepicker-here`, options may be sent via data attributes.

`<input type='text' class='datepicker-here' data-language='en' />`
You can change the month, year, and date

##### Month Selection

`<input type="text" class="datepicker-here"
data-language="en"
data-min-view="months"
data-view="months"
data-date-format="MM" />`
You can also select Month

##### Date Range Selection

Use `data-range="true"` attribute for choosing range of dates.

`<input type="text" class="datepicker-here"
data-range="true"
data-multiple-dates-separator="-"
data-language="en" />`
You can select start and end date for date range selection
JS MDTimePicker

Material concept time picker, a JS plugin. View on Github.

Add a class `.timepicker` on your input element for initialization.

`<input type="text" class="timepicker"/>`

Initialize time picker with javascript.

`<script>
mdtimepicker('.timepicker', { format: 'hh:mm' });
// Initialize time picker
</script>`
Inputs a 12 hour time format

##### Advance Options

Initialize time picker with advance options.

`{
timeFormat: 'hh:mm:ss.000', // format of the time value (data-time attribute)
format: 'h:mm tt', // format of the input value
theme: 'blue', // theme of the timepicker
hourPadding: false, // determines if display value has zero padding for hour value less than 10 (i.e. 05:30 PM);
clearBtn: false, // determines if clear button is visible
is24hour: false, // determines if the clock will use 24-hour format in the UI;
events: {
timeChanged: null, // Callback function on time selection
ready: null, // Callback function when time picker is initialized
shown: null, // Callback function when time picker is shown
hidden: null // Callback function when time picker is hidden
}
}`