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 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
  }
}