632 lines
16 KiB
HTML
632 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Date Picker Demo</title>
|
|
<link rel="stylesheet" href="daterangepicker.css" />
|
|
<script src="jquery-1.11.2.min.js"></script>
|
|
<script src="moment.min.js"></script>
|
|
<script src="jquery.daterangepicker.js"></script>
|
|
<script src="demo.js"></script>
|
|
<style>
|
|
#wrapper
|
|
{
|
|
width:800px;
|
|
margin:0 auto;
|
|
color:#333;
|
|
font-family:Tahoma;
|
|
line-height:1.5;
|
|
font-size:14px;
|
|
}
|
|
.demo { margin:30px 0;}
|
|
.date-picker-wrapper .month-wrapper table .day.lalala { background-color:orange; }
|
|
.options { display:none; border-left:6px solid #8ae; padding:10px; font-size:12px; line-height:1.4; background-color:#eee; border-radius:4px;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="wrapper">
|
|
<h1>jQuery Date Range Picker</h1>
|
|
|
|
<p>
|
|
jQuery Date Range Picker is a jQuery plugin that allows user to select a date range.
|
|
</p>
|
|
<p>
|
|
Requires <a href="http://jquery.com/" target=_blank>jQuery</a> 1.3.2+ (MIT LICENSE), <a href="http://momentjs.com/" target=_blank>Moment</a> 2.2.0+ (MIT LICENSE)
|
|
</p>
|
|
<p>
|
|
Supports IE6+, Firefox, Chrome, Safari and other standard HTML5 browsers.
|
|
</p>
|
|
<p>
|
|
Supports multi-language, you can choose a defined language or set it to auto-detect mode. <br>
|
|
You can also define new languages for it.
|
|
</p>
|
|
<p>
|
|
The HTML DOMs generated is fully CSS styled, you can change the skin by editting the CSS file easily.
|
|
<p>
|
|
|
|
<p>
|
|
I accept further customization job if you require more functions. My personal blog is <a href="http://jszen.com" target=_blank>http://jszen.com</a>
|
|
</p>
|
|
|
|
<p>Fork me on Github <a href="https://github.com/longbill/jquery-date-range-picker">https://github.com/longbill/jquery-date-range-picker</a></p>
|
|
|
|
|
|
<h2>Installation</h2>
|
|
|
|
<pre><link rel="stylesheet" href="daterangepicker.css" />
|
|
<script src="moment.min.js"></script>
|
|
<script src="jquery.daterangepicker.js"></script>
|
|
</pre>
|
|
|
|
|
|
<h2>Demonstrations</h2>
|
|
|
|
<div class="demo">
|
|
Default settings: <input id="date-range0" size="40" value="">
|
|
<a href="#" class="show-option">Show Config</a>
|
|
<pre class="options">
|
|
{}</pre>
|
|
</div>
|
|
|
|
<div>
|
|
Default settings with time enabled: <input id="date-range1" size="60" value="">
|
|
<a href="#" class="show-option">Show Config</a>
|
|
<pre class="options">
|
|
{
|
|
startOfWeek: 'monday',
|
|
separator : ' ~ ',
|
|
format: 'DD.MM.YYYY HH:mm',
|
|
autoClose: false,
|
|
time: {
|
|
enabled: true
|
|
}
|
|
}</pre>
|
|
</div>
|
|
|
|
<div class="demo">
|
|
Default settings with default value: <input id="date-range2" size="40" value="2013-10-01 to 2013-11-04">
|
|
<a href="#" class="show-option">Show Config</a>
|
|
<pre class="options">
|
|
{}</pre>
|
|
</div>
|
|
|
|
<div class="demo">
|
|
Force to Chinese: <input id="date-range3" size="40" value="">
|
|
<a href="#" class="show-option">Show Config</a>
|
|
<pre class="options">
|
|
{
|
|
language:'cn'
|
|
}</pre>
|
|
</div>
|
|
|
|
<div class="demo">
|
|
Force to English: <input id="date-range4" size="40" value="">
|
|
<a href="#" class="show-option">Show Config</a>
|
|
<pre class="options">
|
|
{
|
|
language:'en'
|
|
} </pre>
|
|
</div>
|
|
|
|
<div class="demo">
|
|
Use custom language: <input id="date-range4-1" size="40" value="">
|
|
<a href="#" class="show-option">Show Config</a>
|
|
<pre class="options">
|
|
{
|
|
language: 'custom'
|
|
} </pre>
|
|
</div>
|
|
|
|
<div class="demo">
|
|
Select a date range after 2014-11-20: <input id="date-range5" size="40" value="">
|
|
<a href="#" class="show-option">Show Config</a>
|
|
<pre class="options">
|
|
{
|
|
startDate: '2014-11-20'
|
|
} </pre>
|
|
</div>
|
|
|
|
<div class="demo">
|
|
Select a date range between 2013-01-10 to 2013-02-10: <input id="date-range6" size="40" value="">
|
|
<a href="#" class="show-option">Show Config</a>
|
|
<pre class="options">
|
|
{
|
|
startDate: '2013-01-10',
|
|
endDate: '2013-02-10'
|
|
} </pre>
|
|
</div>
|
|
|
|
<div class="demo">
|
|
Select a date range between 3 days and 7 days: <input id="date-range7" size="40" value="">
|
|
<a href="#" class="show-option">Show Config</a>
|
|
<pre class="options">
|
|
{
|
|
minDays: 3,
|
|
maxDays: 7
|
|
} </pre>
|
|
</div>
|
|
|
|
<div class="demo">
|
|
Set start of week to Monday: <input id="date-range8" size="40" value="">
|
|
<a href="#" class="show-option">Show Config</a>
|
|
<pre class="options">
|
|
{
|
|
startOfWeek: 'monday'
|
|
} </pre>
|
|
</div>
|
|
|
|
<div class="demo">
|
|
Use SPAN instead of INPUT: <span id="date-range9" style="background-color:#49e; color:white;padding:3px; cursor:pointer; border-radius:4px;">select</span>
|
|
<a href="#" class="show-option">Show Config</a>
|
|
<pre class="options">
|
|
{
|
|
getValue: function()
|
|
{
|
|
return this.innerHTML;
|
|
},
|
|
setValue: function(s)
|
|
{
|
|
this.innerHTML = s;
|
|
}
|
|
} </pre>
|
|
</div>
|
|
|
|
<div class="demo">
|
|
Use two inputs: <span id="two-inputs"><input id="date-range200" size="20" value=""> to <input id="date-range201" size="20" value=""></span>
|
|
<a href="#" class="show-option">Show Config</a>
|
|
<pre class="options">
|
|
{
|
|
separator : ' to ',
|
|
getValue: function()
|
|
{
|
|
if ($('#date-range200').val() && $('#date-range201').val() )
|
|
return $('#date-range200').val() + ' to ' + $('#date-range201').val();
|
|
else
|
|
return '';
|
|
},
|
|
setValue: function(s,s1,s2)
|
|
{
|
|
$('#date-range200').val(s1);
|
|
$('#date-range201').val(s2);
|
|
}
|
|
} </pre>
|
|
</div>
|
|
|
|
<div class="demo">
|
|
Use another date format: <input id="date-range10" size="60" value="">
|
|
<a href="#" class="show-option">Show Config</a>
|
|
<pre class="options">
|
|
{
|
|
format: 'dddd MMM Do, YYYY' //more formats at http://momentjs.com/docs/#/displaying/format/
|
|
} </pre>
|
|
</div>
|
|
|
|
<div class="demo">
|
|
Use future date shortcuts: <input id="date-range101" size="60" value="">
|
|
<a href="#" class="show-option">Show Config</a>
|
|
<pre class="options">
|
|
{
|
|
shortcuts :
|
|
{
|
|
'next-days': [3,5,7],
|
|
'next': ['week','month','year']
|
|
}
|
|
} </pre>
|
|
</div>
|
|
|
|
<div class="demo">
|
|
Use past date shortcuts: <input id="date-range102" size="60" value="">
|
|
<a href="#" class="show-option">Show Config</a>
|
|
<pre class="options">
|
|
{
|
|
shortcuts :
|
|
{
|
|
'prev-days': [3,5,7],
|
|
'prev': ['week','month','year'],
|
|
'next-days':null,
|
|
'next':null
|
|
}
|
|
} </pre>
|
|
</div>
|
|
|
|
<div class="demo">
|
|
Use custom shortcuts: <input id="date-range100" size="60" value="">
|
|
<a href="#" class="show-option">Show Config</a>
|
|
<pre class="options">
|
|
{
|
|
shortcuts : null,
|
|
startOfWeek: 'sunday',
|
|
language:'en',
|
|
customShortcuts:
|
|
[
|
|
//if return an array of two dates, it will select the date range between the two dates
|
|
{
|
|
name: 'this week',
|
|
dates : function()
|
|
{
|
|
var start = moment().day(0).toDate();
|
|
var end = moment().day(6).toDate();
|
|
return [start,end];
|
|
}
|
|
},
|
|
//if only return an array of one date, it will display the month which containing the date. and it will not select any date range
|
|
{
|
|
name: 'Oct 2014',
|
|
dates : function()
|
|
{
|
|
//move calendars to show this date's month and next month
|
|
var movetodate = moment('2014-10','YYYY-MM').toDate();
|
|
return [movetodate];
|
|
}
|
|
}
|
|
]
|
|
} </pre>
|
|
</div>
|
|
|
|
<div class="demo">
|
|
Use custom values: <input id="date-range105" size="60" value="">
|
|
<a href="#" class="show-option">Show Config</a>
|
|
<pre class="options">
|
|
{
|
|
language:'en',
|
|
customValueLabel: 'Dynamic Ranges',
|
|
showCustomValues: true,
|
|
customValues:
|
|
//if return an array of two dates, it will select the date range between the two dates
|
|
[
|
|
{
|
|
name: 'MTD',
|
|
value: 'Month To Date'
|
|
},
|
|
{
|
|
name: 'YTD',
|
|
value: 'Year To Date'
|
|
}
|
|
]
|
|
} </pre>
|
|
</div>
|
|
|
|
|
|
<div class="demo">
|
|
Hide shortcuts: <input id="date-range104" size="60" value="">
|
|
<a href="#" class="show-option">Show Config</a>
|
|
<pre class="options">
|
|
{
|
|
showShortcuts:false
|
|
} </pre>
|
|
</div>
|
|
|
|
<div class="demo">
|
|
Auto-close after selection: <input id="date-range103" size="60" value="">
|
|
<a href="#" class="show-option">Show Config</a>
|
|
<pre class="options">
|
|
{
|
|
autoClose: true
|
|
} </pre>
|
|
</div>
|
|
|
|
<div class="demo">
|
|
Change the separator between date strings: <input id="date-range11" size="40" value="">
|
|
<a href="#" class="show-option">Show Config</a>
|
|
<pre class="options">
|
|
{
|
|
separator : ' ~ '
|
|
} </pre>
|
|
</div>
|
|
|
|
<div class="demo">
|
|
In-line mode: <input id="date-range12" size="40" value="">
|
|
<a href="#" class="show-option">Show Config</a>
|
|
<pre class="options">
|
|
{
|
|
inline:true,
|
|
container: '#date-range12-container',
|
|
alwaysOpen:true
|
|
} </pre>
|
|
<div id="date-range12-container"></div>
|
|
</div>
|
|
|
|
<div class="demo">
|
|
Single Date mode: <input id="date-range13" size="40" value="2015-03-01">
|
|
<a href="#" class="show-option">Show Config</a>
|
|
<pre class="options">
|
|
{
|
|
autoClose: true,
|
|
singleDate : true,
|
|
showShortcuts: false
|
|
} </pre>
|
|
</div>
|
|
|
|
<div class="demo">
|
|
Batch mode ( week ): <input id="date-range14" size="60" value="">
|
|
<a href="#" class="show-option">Show Config</a>
|
|
<pre class="options">
|
|
{
|
|
batchMode: 'week',
|
|
showShortcuts: false
|
|
} </pre>
|
|
</div>
|
|
|
|
<div class="demo">
|
|
Batch mode ( week-range ): <input id="date-range14-2" size="60" value="">
|
|
<a href="#" class="show-option">Show Config</a>
|
|
<pre class="options">
|
|
{
|
|
batchMode: 'week-range',
|
|
showShortcuts: false
|
|
} </pre>
|
|
</div>
|
|
|
|
|
|
<div class="demo">
|
|
Disable some dates: <input id="date-range15" size="60" value="">
|
|
<a href="#" class="show-option">Show Config</a>
|
|
<pre class="options">
|
|
{
|
|
showShortcuts: false,
|
|
beforeShowDay: function(t)
|
|
{
|
|
var valid = !(t.getDay() == 0 || t.getDay() == 6); //disable saturday and sunday
|
|
var _class = '';
|
|
var _tooltip = valid ? '' : 'weekends are disabled';
|
|
return [valid,_class,_tooltip];
|
|
}
|
|
} </pre>
|
|
</div>
|
|
|
|
<div class="demo">
|
|
Control by script:
|
|
<button id="date-range16-open">Open</button>
|
|
<button id="date-range16-close">Close</button>
|
|
<button id="date-range16-set">Set Date Range</button>
|
|
<button id="date-range16-set-silent">Set Date Range (no event / silent: true)</button>
|
|
<button id="date-range16-clear">Clear Selection</button>
|
|
<button id="date-range16-destroy">Destroy</button>
|
|
<br>
|
|
<input id="date-range16" size="60" value="">
|
|
|
|
<a href="#" class="show-option">Show Config</a>
|
|
<pre class="options">
|
|
$('#date-range16').dateRangePicker(
|
|
{
|
|
showShortcuts: false,
|
|
format: 'YYYY-MM-DD'
|
|
}).bind('datepicker-change', function(evt, obj) {
|
|
alert('date1: ' + obj.date1 + ' / date2: ' + obj.date2);
|
|
});
|
|
|
|
$('#date-range16-open').click(function(evt)
|
|
{
|
|
evt.stopPropagation();
|
|
$('#date-range16').data('dateRangePicker').open();
|
|
});
|
|
|
|
$('#date-range16-close').click(function(evt)
|
|
{
|
|
evt.stopPropagation();
|
|
$('#date-range16').data('dateRangePicker').close();
|
|
});
|
|
|
|
$('#date-range16-set').click(function(evt)
|
|
{
|
|
evt.stopPropagation();
|
|
$('#date-range16').data('dateRangePicker').setDateRange('2013-11-20','2014-08-25');
|
|
});
|
|
|
|
$('#date-range16-set-silent').click(function(evt)
|
|
{
|
|
evt.stopPropagation();
|
|
$('#date-range16').data('dateRangePicker').setDateRange('2014-11-03','2015-02-12', true);
|
|
});
|
|
|
|
$('#date-range16-clear').click(function(evt)
|
|
{
|
|
evt.stopPropagation();
|
|
$('#date-range16').data('dateRangePicker').clear();
|
|
});
|
|
|
|
$('#date-range16-destroy').click(function(evt)
|
|
{
|
|
evt.stopPropagation();
|
|
$('#date-range16').data('dateRangePicker').destroy();
|
|
}); </pre>
|
|
</div>
|
|
|
|
<div class="demo">
|
|
Sticky months: <input id="date-range17" size="60" value="">
|
|
<a href="#" class="show-option">Show Config</a>
|
|
<pre class="options">
|
|
{
|
|
stickyMonths: true,
|
|
startDate: '2013-01-10',
|
|
endDate: '2013-05-10'
|
|
} </pre>
|
|
</div>
|
|
|
|
|
|
<h2>Configuration</h2>
|
|
<pre><b>Usage:</b> $('#dom-id').dateRangePicker(configObject);</pre>
|
|
<p>
|
|
The default configuration object is:<br>
|
|
<pre>{
|
|
format: 'YYYY-MM-DD',
|
|
separator: ' to ',
|
|
language: 'auto',
|
|
startOfWeek: 'sunday',// or sunday
|
|
getValue: function()
|
|
{
|
|
return this.value;
|
|
},
|
|
setValue: function(s)
|
|
{
|
|
this.value = s;
|
|
},
|
|
startDate: false,
|
|
endDate: false,
|
|
minDays: 0,
|
|
maxDays: 0,
|
|
showShortcuts: true,
|
|
time: {
|
|
enabled: false
|
|
},
|
|
shortcuts:
|
|
{
|
|
//'prev-days': [1,3,5,7],
|
|
'next-days': [3,5,7],
|
|
//'prev' : ['week','month','year'],
|
|
'next' : ['week','month','year']
|
|
},
|
|
customShortcuts : [],
|
|
inline:false,
|
|
container: 'body',
|
|
alwaysOpen:false,
|
|
singleDate:false,
|
|
batchMode:false,
|
|
beforeShowDay: [function],
|
|
stickyMonths: false
|
|
}</pre>
|
|
</p>
|
|
<h3>You can use the following keys in the configObject to overwrite the default configuration:</h3>
|
|
|
|
<pre>
|
|
<b>format (String)</b>
|
|
<i>The date format string used for Moment.
|
|
click <a href="http://momentjs.com/docs/#/displaying/format/" target=_blank>here</a> to see Moment documentation</i>
|
|
|
|
<b>separator (String)</b>
|
|
<i>The separator string used between date strings</i>
|
|
|
|
<b>language (String)</b>
|
|
<i>pre-defined languages are "en" and "cn", you can define your own
|
|
language then set this to the name of new language.
|
|
You can also set this to "auto" to make it auto detect browser language.</i>
|
|
|
|
<b>startOfWeek (String)</b>
|
|
<i>"sunday" or "monday"</i>
|
|
|
|
<b>getValue (Function)</b>
|
|
<i>This function is called when get date range string from DOM
|
|
When it is called, the context of this function is set to the datepicker DOM</i>
|
|
|
|
<b>setValue (Function)</b>
|
|
<i>This function is called when set date range string to DOM</i>
|
|
|
|
<b>startDate (String or false)</b>
|
|
<i>This string defines the earliest date which is allowed for the user, same format as `format`</i>
|
|
|
|
<b>endDate (String or false)</b>
|
|
<i>This string defines the latest date which is allowed for the user, same format as `format`</i>
|
|
|
|
<b>minDays (Number)</b>
|
|
<i>This number defines the minimum days of the selected range
|
|
if this is 0, means do not limit minimum days</i>
|
|
|
|
<b>maxDays (Number)</b>
|
|
<i>This number defines the maximum days of the selected range
|
|
if this is 0, means do not limit maximum days</i>
|
|
|
|
<b>showShortcuts (Boolean)</b>
|
|
<i>hide or show shortcuts area</i>
|
|
|
|
<b>shortcuts (Object)</b>
|
|
<i>define the shortcuts buttons. there are some built in shortcuts, see source code</i>
|
|
|
|
<b>time (Object)</b>
|
|
<i>If enabled adds time selection controls.</i>
|
|
|
|
<b>customShortcuts (Array)</b>
|
|
<i>define custom shortcut buttons. see demo.js</i>
|
|
|
|
<b>inline (Boolean)</b>
|
|
<i>whether to render the date range picker dom in inline mode instead of overlay mode,
|
|
if set to true, please set `container` too</i>
|
|
|
|
<b>container (String, css selector || DOM Object)</b>
|
|
<i>where should the date range picker dom should be renderred to</i>
|
|
|
|
<b>alwaysOpen (Boolean)</b>
|
|
<i>if you use inline mode, you may want the date range picker widget to be renderred when the page loads
|
|
set this to true will also hide the "close" button
|
|
</i>
|
|
|
|
<b>singleDate (Boolean)</b>
|
|
<i>choose a single date instead of a date range.
|
|
</i>
|
|
|
|
<b>batchMode (false / 'week' / 'month')</b>
|
|
<i> auto batch select mode </i>
|
|
<i> false (default), week, month, week-range, month-range</i>
|
|
|
|
<b>beforeShowDay (Function)</b>
|
|
<i>A function that takes a date as a parameter and must return an array with:
|
|
[0]: true/false indicating whether or not this date is selectable
|
|
[1]: a CSS class name to add to the date's cell or "" for the default presentation
|
|
[2]: an optional popup tooltip for this date
|
|
The function is called for each day in the datepicker before it is displayed.</i>
|
|
|
|
<b>stickyMonths (Boolean)</b>
|
|
<i>If true, there will only be one previous and one next button. Clicking them will change
|
|
both the months. This setting will have no effect if singleDate option is set to true</i>
|
|
|
|
</pre>
|
|
|
|
<h2>Events</h2>
|
|
<p>3 events will be triggerred on the date range picker DOM</p>
|
|
<pre>$('#dom-id')
|
|
.dateRangePicker()
|
|
.bind('datepicker-change',function(event,obj)
|
|
{
|
|
console.log(obj);
|
|
// obj will be something like this:
|
|
// {
|
|
// date1: (Date object of the earlier date),
|
|
// date2: (Date object of the later date),
|
|
// value: "2013-06-05 to 2013-06-07"
|
|
// }
|
|
})
|
|
.bind('datepicker-apply',function(event,obj)
|
|
{
|
|
console.log(obj);
|
|
})
|
|
.bind('datepicker-close',function()
|
|
{
|
|
console.log('close');
|
|
});
|
|
</pre>
|
|
|
|
<br>
|
|
|
|
<h2>APIs</h2>
|
|
<p></p>
|
|
<pre>//after you called $(dom).dateRangePicker();
|
|
|
|
$(dom).data('dateRangePicker')
|
|
.setDateRange('2013-11-20','2013-11-25'); //set date range, two date strings should follow the `format` in config object, set the third argument to be `true` if you don't want this method to trigger a `datepicker-change` event.
|
|
.clear(); // clear date range
|
|
.close(); // close date range picker overlay
|
|
.open(); // open date range picker overlay
|
|
.destroy(); // destroy all date range picker related things
|
|
</pre>
|
|
|
|
<h2>License</h2>
|
|
<pre>
|
|
This date range picker plugin is under MIT LICENSE
|
|
</pre>
|
|
|
|
|
|
|
|
<script>
|
|
$(function()
|
|
{
|
|
$('a.show-option').click(function(evt)
|
|
{
|
|
evt.preventDefault();
|
|
$(this).siblings('.options').slideToggle();
|
|
});
|
|
})
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|