Material Inspired Date & Date Range Picker - duDatepicker
File Size: | 106 KB |
---|---|
Views Total: | 11738 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

duDatepicker is a Material Design inspired JavaScript date picker plugin that makes it easy to select a date or a date range in a popup or inline fashion.
Features:
- Available as jQuery or Vanilla JavaScript plugin.
- Min/max dates.
- Disabled dates and days.
- Custom themes.
- Custom date formats.
See Also:
- Material Inspired Clock Time Picker Plugin - jQuery MDTimePicker
- 10 Best Date And Time Picker JavaScript Plugins
- 10 Best Date And Timer Pickers In Vanilla JavaScript
How to use it:
1. Install & download the duDatepicker package with NPM.
// jQuery Version npm i @dmuy/jquery-datepicker // Vanilla JS Version npm i @dmuy/datepicker
2. Import the date picker component and its stylesheet into your project.
// jQuery Version import '@dmuy/jquery-datepicker/duDatepicker.css' import duDatepicker from '@dmuy/jquery-datepicker' // Vanilla JS Version import '@dmuy/datepicker/dist/duDatepicker.css' import duDatepicker from '@dmuy/datepicker'
<!-- Or load files in the document --> <script src="/path/to/cdn/jquery.min.js"></script> <link rel="stylesheet" href="./dist/duDatepicker.min.css" /> <script src="./dist/duDatepicker.min.js"></script> <!-- Vanilla JS Version --> <link rel="stylesheet" href="./dist/duDatepicker.min.css" /> <link rel="stylesheet" href="./dist/duDatepicker-theme.css" /> <script src="./dist/duDatepicker.min.js"></script>
3. Attach a default date picker to an input field you specify.
<input type="text" id="datepicker" />
// jQuery Version $('#datepicker').duDatepicker({ // options here }); // Vanilla JS Version duDatepicker('#datepicker',{ // options here });
4. Attach the date picker to an input field you specify. That's it.
<input type="text" id="datepicker" />
// jQuery Version $('#datepicker').duDatepicker({ // options here }); // Vanilla JS Version duDatepicker('#datepicker',{ // options here });
5. Attach a date range picker to an input field you specify.
<input type="text" id="daterange" />
// jQuery Version $('#daterange').duDatepicker({ range: true }); // Vanilla JS Version duDatepicker('#daterange',{ range: true });
6. You can also split the date range picker to two input fields.
<input type="text" id="daterange" /> <input type="text" id="range-from" /> <input type="text" id="range-to" />
// jQuery Version $('#daterange').duDatepicker({ range: true, fromTarget: '#range-from', toTarget: '#range-to' }); // Vanilla JS Version duDatepicker('#daterange',{ range: true, fromTarget: '#range-from', toTarget: '#range-to' });
7. Set the min/max dates allowed to pick.
<!-- Via HTML Data Attribute --> <input type="text" id="datepicker" data-mindate="1/1/2000" data-maxdate="9/18/2020" />
// Or In The JavaScript // jQuery Version $('#datepicker').duDatepicker({ minDate: 'today' }); // Vanilla JS Version duDatepicker('#datepicker',{ maxDate: 'today' });
8. Apply a theme to the date picker.
<!-- Via HTML Data Attribute --> <input type="text" id="datepicker" data-theme="myTheme" />
// Or In The JavaScript // jQuery Version $('#datepicker').duDatepicker({ theme: 'myTheme' }); // Vanilla JS Version duDatepicker('#datepicker',{ theme: 'myTheme' });
9. Create a new theme as follows:
.dudp__wrapper[data-theme='dark'] .dudp__calendar-header { background-color: #121212; } .dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__date { color: rgba(255, 255, 255, 0.87); } .dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__date.current { color: #1976d2; } .dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__date.in-range, .dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__date.range-from, .dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__date.range-to { background-color: rgba(25, 118, 210, 0.2); } .dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__date.selected:before, .dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__date.range-from:before, .dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__date.range-to:before { background-color: #1976d2; } .dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__date.selected:hover:before, .dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__date.range-from:hover:before, .dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__date.range-to:hover:before { background-color: #0d47a1; } .dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__date.disabled { color: rgba(255, 255, 255, 0.38); } .dudp__wrapper[data-theme='dark'] .dudp__cal-container, .dudp__wrapper[data-theme='dark'] .dudp__cal-container .dudp__years-view { background-color: #1D1D1D; } .dudp__wrapper[data-theme='dark'] .dudp__cal-container .dudp__btn-cal-prev, .dudp__wrapper[data-theme='dark'] .dudp__cal-container .dudp__btn-cal-next, .dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-month-year, .dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__weekdays span, .dudp__wrapper[data-theme='dark'] .dudp__months-view .dudp__month:not(.selected), .dudp__wrapper[data-theme='dark'] .dudp__years-view .dudp__year:not(.selected), .dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__pm, .dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__nm { color: rgba(255, 255, 255, 0.6); } .dudp__wrapper[data-theme='dark'] .dudp__buttons .dudp__button, .dudp__wrapper[data-theme='dark'] .dudp__months-view .dudp__month.selected, .dudp__wrapper[data-theme='dark'] .dudp__years-view .dudp__year.selected { color: #0d47a1; } .dudp__wrapper[data-theme='dark'] .dudp__buttons .dudp__button.clear { color: #ef5350 !important; } .dudp__wrapper[data-theme='dark'] .dudp__cal-container .dudp__btn-cal-prev:hover, .dudp__wrapper[data-theme='dark'] .dudp__cal-container .dudp__btn-cal-next:hover, .dudp__wrapper[data-theme='dark'] .dudp__buttons .dudp__button:hover, .dudp__wrapper[data-theme='dark'] .dudp__months-view .dudp__month:hover, .dudp__wrapper[data-theme='dark'] .dudp__years-view .dudp__year:hover, .dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__date:not(.disabled):not(.selected):not(.range-from):not(.range-to):hover:before { background-color: rgba(255, 255, 255, 0.04); } .dudp__wrapper[data-theme='dark'] .dudp__cal-container .dudp__btn-cal-prev:active, .dudp__wrapper[data-theme='dark'] .dudp__cal-container .dudp__btn-cal-next:active, .dudp__wrapper[data-theme='dark'] .dudp__buttons .dudp__button:active, .dudp__wrapper[data-theme='dark'] .dudp__months-view .dudp__month:active, .dudp__wrapper[data-theme='dark'] .dudp__years-view .dudp__year:active, .dudp__wrapper[data-theme='dark'] .dudp__calendar .dudp__cal-week .dudp__date:not(.disabled):not(.selected):not(.range-from):not(.range-to):active:before { background-color: rgba(255, 255, 255, 0.1); }
10. More configuration options with default values.
{ // customize date format here format: 'mm/dd/yyyy', // output date format outFormat: null // theme name theme: 'blue', // auto pick the date on click auto: false, // shows a Clear button in the date picker clearBtn: false, // shows a Cancel button in the date picker cancelBtn: false, // closes the date picker on click outside overlayClose: true, // an array of disabled dates // i.e. ['10/30/2018', '11/01/2020-11/15/2020'] disabledDates: [], // an array of disabled days // i.e. Monday, Tuesday, Mon, Tue, Mo, Tu disabledDays: [], // enable date range picker range: false, // delimiter between dates rangeDelim: '-', // event handles events: { dateChanged: function (data) { console.log('From: ' + data.dateFrom + '\nTo: ' + data.dateTo) }, onRangeFormat: function (from, to) { // do something }, ready: null, shown: null, hidden: null } }
11. API methods.
// set date duDatepicker('#datepicker', 'setValue', '08/01/2020'); // set date range duDatepicker('#daterange', 'setValue', '08/01/2020-08/05/2020'); // show duDatepicker('#datepicker', 'show'); // hide duDatepicker('#datepicker', 'hide'); // destroy duDatepicker('#datepicker', 'destroy');
This awesome jQuery plugin is developed by dmuy. For more Advanced Usages, please check the demo page or visit the official website.