a simple daterangepicker
npm install date-range-pickerdaterangepicker
=========
 
build  
a simple daterangepicker
compatibility for IE
* Because of using browserify, if you don't need hour and minute picker, it supports IE9.
* If you need hour and minute picker, because of using range input, it supports IE10.
This component relies on moment and moment-range, so you should include them first
$ npm install date-range-picker
$ bower install date-range-picker // or use bower
Include js in /dist by tag , you can also require js by require('date-range-picker')
var configs1 = {
lang: 'zh-cn', // using language
numberOfCalendars: 1, // displaying month number
calendarType: 'day', // type of calendar, day, week or month, dafault 'day'
type: 'single', // single, range, terminal
time: true, // want display & ctrl hours and minutes or not
noCalendars: false, // want not display & ctrl calandar, default false
date: moment('2015-10-01 23:33'), // default date for type single
range: moment.range(['2015-10-01', '2015-10-08']), // default range for type range or terminal
minDate: moment('2015-09-30'), // limit minDate
maxDate: moment(), // limit maxDate
onSelect: function(date/range) {
//...
drp2.set('range', range); // set range in onSelect is no use
} // callback after select, return date or range with moment and moment-range object
}
/ Get a dom object named such as el1 first /
var drp1 = new DateRangePicker(el1, configs1);
console.log(drp1.date); // current date for type
console.log(drp1.range); // current range for type range and terminal
console.log(drp1.time.hours); // current hours array
console.log(drp1.time.minutes); // current minutes array
/ set a value and reload daterangepicker /
drp1.set('range', moment.range()); // support: date and range, and I'm not ensure set other props are useful.
/ clear daterangepicker /
drp1.clear();
/ support for shortcuts /
config.shortcuts = {
el: shortcutsEl, // default: null
btns: ['today', ...] // sort and which btn will be shown,
// default and only those option ['today', 'yesterday', 'lastWeek', 'custom']
}
// only support chinese, english and japanese , you can give me a PR for your language.
// in src/lang.js
{
today: 'todayStr', // such as: '今天'
yesterday: 'yesterdayStr', // such as: '昨天'
lastWeek: 'lastWeekStr', // for range and terminal. such as: '最近一周'
lastMonth: 'lastMonthStr', // for range and terminal. such as: '最近一月'
custom: 'customStr' // such as: '自定义'
};
/ support for dimension in single(developing) /
config.dimension = {
el: dimensionEl, // default: null
btns: ['day', ...] // sort and which btn will be shown,
// default and only those option ['day', 'week', 'month']
}
// only support chinese, english and japanese, you can give me a PR for your language.
// in src/lang.js
{
day: 'dayStr', // such as: '日'
week: 'weekStr', // such as: '周'
month: 'monthStr' // such as: '月'
};
$ git clone && make dev && view localhost:8888
Easily transform to angular directive or react component (in new project)