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

Material concept time picker, a jQuery 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>
$('.timepicker').mdtimepicker(); // Initialize time picker
</script>

Inputs a 12 hour time format

Advance Options

Initialize time picker with advance options.

$('.timepicker').mdtimepicker({
timeFormat: 'hh:mm:ss.000', // format of the time value
format: 'h:mm tt', // format of the input value
theme: 'blue', // theme of the timepicker
readOnly: true, // determines if input is readonly
hourPadding: false // determines if display value has zero padding for hour value less than 10 (i.e. 05:30 PM);
});