js时间日期选择插件

演示  website 下载

插件介绍

这是一款JavaScript时间日期选择插件，以弹框或内联方式选择日期，日期范围。3种主题风格，支持设置最小/最大日期，禁用日期，自定义日期格式。

使用方法

1.在页面中加载js时间日期选择插件主题样式文件。

<link rel="stylesheet" href="./dist/duDatepicker.min.css" />
<link rel="stylesheet" href="./dist/duDatepicker-theme.css" />

2.在页面尾部加载js时间日期选择插件js文件。

<script src="./dist/duDatepicker.min.js"></script>

3. 插件初始化。

<input type="text" id="datepicker" />
duDatepicker('#datepicker',{
  // options here
});

4. 也可以将日期范围选择器拆分为两个输入字段。

<input type="text" id="daterange" />
<input type="text" id="range-from" />
<input type="text" id="range-to" />
或者通过js设置
duDatepicker('#daterange',{
  range: true,
  fromTarget: '#range-from', 
  toTarget: '#range-to'
});

5. 设置允许选择的最小/最大日期。

<input type="text" id="datepicker"   data-mindate="1/1/2000"  data-maxdate="9/18/2020" />
或者通过js设置       
duDatepicker('#datepicker',{
  maxDate: 'today'
});

6. 选择日期选择器主题。

<input type="text" id="datepicker" 
       data-theme="myTheme" />
或者通过js设置
duDatepicker('#datepicker',{
  theme: 'myTheme'
});

7. 自定义一个新的主题样式:

.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);
}

8. 插件默认配置选项。

{

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

9 API 方法。

// 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');