jQuery Plugins › jQuery Time & Clock Plugins › duDatepicker

Material Inspired Date & Date Range Picker - duDatepicker

File Size: 106 KB
Views Total: 12737
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP jQuery Plugins For 2024

Chrome, IE9+, FireFox, Opera, Safari#Date Picker#Material Design#date range
Material Inspired Date & Date Range Picker - duDatepicker

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:

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.