Date Picker

Material Admin Pro uses a third party plugin to handle the functionality for the date picker element. Litepicker is a lightweight date range picker plugin with no dependencies, meaning it will integrate well with any framework.

Single Date Example

The single date example is the most basic implementation of Litepicker. Keep in mind that JavaScript is required to implement the date picker, which you can read more about on Litepicker's documentation page.

Date:

<label class="form-label" for="litepickerSingleDate">Date:</label>
<input class="form-control" id="litepickerSingleDate" placeholder="Select a date...">

label.form-label(for='litepickerSingleDate') Date:
input.form-control#litepickerSingleDate(placeholder='Select a date...')

Date Range Example

The simple date range opens a single month at a time in the date range picker dropdown, allowing users to select a range of dates rather than a single one.

Date range:

<label class="form-label" for="litepickerDateRange">Date range:</label>
<input class="form-control" id="litepickerDateRange" placeholder="Select date range...">

label.form-label(for='litepickerDateRange') Date range:
input.form-control#litepickerDateRange(placeholder='Select date range...')

Two Month Range Example

The number of months shown in the date range picker can be modified. The below example shows two months opening for easier selection of wider date ranges.

Date range:

<label class="form-label" for="litepickerDateRange2Months">Date range:</label>
<input class="form-control" id="litepickerDateRange2Months" placeholder="Select date range...">

label.form-label(for='litepickerDateRange2Months') Date range:
input.form-control#litepickerDateRange2Months(placeholder='Select date range...')

Single Date Example

Date Range Example

Two Month Range Example

Related Links

Change the theme type!

Try a pre-built swatch!

Or choose your own colors...

Need ideas? Randomize!

Finished? Export your color palette file with install instructions!