You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -35,263 +42,5 @@ jQuery Date Range Picker is a jQuery plugin that allows user to select a date ra
35
42
* fixed some time related bugs
36
43
37
44
38
-
##Configuration##
39
-
40
-
Usage:
41
-
```javascript
42
-
$('#dom-id').dateRangePicker(configObject);
43
-
```
44
-
45
-
The default configuration object is:
46
-
```javascript
47
-
{
48
-
format:'YYYY-MM-DD',
49
-
separator:' to ',
50
-
language:'auto',
51
-
startOfWeek:'sunday',// or monday
52
-
getValue:function()
53
-
{
54
-
returnthis.value;
55
-
},
56
-
setValue:function(s)
57
-
{
58
-
this.value= s;
59
-
},
60
-
startDate:false,
61
-
endDate:false,
62
-
minDays:0,
63
-
maxDays:0,
64
-
showShortcuts:true,
65
-
time: {
66
-
enabled:false
67
-
},
68
-
shortcuts:
69
-
{
70
-
//'prev-days': [1,3,5,7],
71
-
'next-days': [3,5,7],
72
-
//'prev' : ['week','month','year'],
73
-
'next': ['week','month','year']
74
-
},
75
-
customShortcuts : [],
76
-
inline:false,
77
-
container:'body',
78
-
alwaysOpen:false,
79
-
singleDate:false,
80
-
batchMode:false,
81
-
beforeShowDay: [function],
82
-
dayDivAttrs: [],
83
-
dayTdAttrs: [],
84
-
applyBtnClass: '',
85
-
swapTime: true,
86
-
}
87
-
```
88
-
89
-
You can use the following keys in the configObject to overwrite the default configuration:
90
-
91
-
<b>format (String)</b>
92
-
<i style="display:block; margin-left:2em;">The date format string used for Moment.
93
-
click <a href="http://momentjs.com/docs/#/displaying/format/" target=_blank>here</a> to see Moment documentation</i>
94
-
95
-
<b>separator (String)</b>
96
-
<i style="display:block; margin-left:2em;">The separator string used between date strings</i>
97
-
98
-
<b>language (String)</b>
99
-
<i style="display:block; margin-left:2em;">pre-defined languages are "en" and "cn", you can define your own
100
-
language then set this to the name of new language.
101
-
You can also set this to "auto" to make it auto detect browser language.</i>
102
-
103
-
<b>startOfWeek (String)</b>
104
-
<i style="display:block; margin-left:2em;">"sunday" or "monday"</i>
105
-
106
-
<b>getValue (Function)</b>
107
-
<i style="display:block; margin-left:2em;">This function is called when get date range string from DOM
108
-
When it is called, the context of this function is set to the datepicker DOM</i>
109
-
110
-
<b>setValue (Function)</b>
111
-
<i style="display:block; margin-left:2em;">This function is called when set date range string to DOM</i>
112
-
113
-
<b>startDate (String or false)</b>
114
-
<i style="display:block; margin-left:2em;">This string defines the earliest date which is allowed for the user, same format as `format`</i>
115
-
116
-
<b>endDate (String or false)</b>
117
-
<i style="display:block; margin-left:2em;">This string defines the latest date which is allowed for the user, same format as `format`</i>
118
-
119
-
<b>minDays (Number)</b>
120
-
<i style="display:block; margin-left:2em;">This number defines the minimum days of the selected range
121
-
if this is 0, means do not limit minimum days</i>
122
-
123
-
<b>maxDays (Number)</b>
124
-
<i style="display:block; margin-left:2em;">This number defines the maximum days of the selected range
125
-
if this is 0, means do not limit maximum days</i>
126
-
127
-
<b>showShortcuts (Boolean)</b>
128
-
<i style="display:block; margin-left:2em;">hide or show shortcuts area</i>
129
-
130
-
<b>time (Object)</b>
131
-
<i style="display:block; margin-left:2em;">If enabled adds time selection controls.</i>
132
-
133
-
<b>shortcuts (Object)</b>
134
-
<i style="display:block; margin-left:2em;">define the shortcuts buttons. there are some built in shortcuts, see source code</i>
135
-
136
-
<b>customShortcuts (Array)</b>
137
-
<i style="display:block; margin-left:2em;">define custom shortcut buttons. see demo.js</i>
138
-
139
-
<b>inline (Boolean)</b>
140
-
<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>
141
-
142
-
<b>container (String, css selector || DOM Object)</b>
143
-
<i>where should the date range picker dom should be renderred to</i>
144
-
145
-
<b>alwaysOpen (Boolean)</b>
146
-
<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>
147
-
148
-
<b>singleDate (Boolean)</b>
149
-
<i>choose a single date instead of a date range.</i>
<i>A function that takes a date as a parameter and must return an array with:
157
-
[0]: true/false indicating whether or not this date is selectable
158
-
[1]: a CSS class name to add to the date's cell or "" for the default presentation
159
-
[2]: an optional popup tooltip for this date
160
-
The function is called for each day in the datepicker before it is displayed.</i>
161
-
162
-
<b>dayDivAttrs (Array(Function))</b>
163
-
<i>An array of functions that take the today as a parameter and must return an object, e.g. `{title:"unavailable", class:" red-unavailable "}`.
164
-
The returned objects then merge, adding up existing keys (in order of callbacks in the array), so strings with same keys get concatenated and numbers result in the sum of them.
165
-
The resulting object then turns into `div` tag of the day attributes.</i>
166
-
167
-
```javascript
168
-
{
169
-
dayDivAttrs: [
170
-
function(date){ // let's put bg colors and price per day attributes from php-prepared data array or put the default one
function(date){ // let's underline saturdays and assign a title
177
-
if(date ==undefined) return {};
178
-
return (moment(date.time).day()==6)?{'style':'border-left: 2px lightgreen solid;border-right: 2px lightgreen solid;', 'title':'\nSaturday is the check-in day of week.'}:{};
179
-
},
180
-
]
181
-
}
182
-
```
183
-
184
-
<b>dayTdAttrs (Array(Function))</b>
185
-
<i>An array of functions that take the today as a parameter and must return an object, e.g. `{style:" background-color: red; "}`.
186
-
The returned objects then merge, adding up existing keys (in order of callbacks in the array), so strings with same keys get concatenated and numbers result in the sum of them.
187
-
The resulting object then turns into `td` tag of the day attributes.</i>
188
-
189
-
```javascript
190
-
{
191
-
dayTdAttrs: [
192
-
function(date){ // let's put bg colors from php-prepared data array
<i>If true, it will show only one month instead of two months. You can select date range
211
-
in the one month view. If this is set to 'auto', it will be changed to true if the screen width
212
-
is lower than 480.</i>
213
-
214
-
<b>showDateFilter ( Function(Int time, Int date) )</b>
215
-
<i>This is a callback function when creating each date element in the calendar. First parameter will
216
-
be the timestamp of that day. Second parameter will be the date of that month.</i>
217
-
218
-
<b>customTopBar ( Function || String)</b>
219
-
<i>If you set this parameter, it will use this value in the top bar.</i>
220
-
221
-
<b>extraClass (String)</b>
222
-
<i>Set extra class name to the date range picker dom.</i>
223
-
224
-
<b>showTopbar (Boolean)</b>
225
-
<i>If show the top bar.</i>
226
-
227
-
<b>swapTime (Boolean)</b>
228
-
<i>If true and if time is enabled, on choosing first enddate and than startdate, endtime and starttime will be swapped. If this configkey is false, only date will be swapped, time will stay constant. If time is disabled, this config key is not used.</i>
229
-
230
-
##Events##
231
-
232
-
Events will be triggered on the date range picker DOM
/* This event will be triggered when first date is selected */
239
-
console.log(obj);
240
-
// obj will be something like this:
241
-
// {
242
-
// date1: (Date object of the earlier date)
243
-
// }
244
-
})
245
-
.bind('datepicker-change',function(event,obj)
246
-
{
247
-
/* This event will be triggered when second date is selected */
248
-
console.log(obj);
249
-
// obj will be something like this:
250
-
// {
251
-
// date1: (Date object of the earlier date),
252
-
// date2: (Date object of the later date),
253
-
// value: "2013-06-05 to 2013-06-07"
254
-
// }
255
-
})
256
-
.bind('datepicker-apply',function(event,obj)
257
-
{
258
-
/* This event will be triggered when user clicks on the apply button */
259
-
console.log(obj);
260
-
})
261
-
.bind('datepicker-close',function()
262
-
{
263
-
/* This event will be triggered before date range picker close animation */
264
-
console.log('before close');
265
-
})
266
-
.bind('datepicker-closed',function()
267
-
{
268
-
/* This event will be triggered after date range picker close animation */
269
-
console.log('after close');
270
-
})
271
-
.bind('datepicker-open',function()
272
-
{
273
-
/* This event will be triggered before date range picker open animation */
274
-
console.log('before open');
275
-
})
276
-
.bind('datepicker-opened',function()
277
-
{
278
-
/* This event will be triggered after date range picker open animation */
279
-
console.log('after open');
280
-
})
281
-
```
282
-
283
-
###APIs###
284
-
285
-
after you called $(dom).dateRangePicker();
286
-
```javascript
287
-
$(dom).data('dateRangePicker')
288
-
.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.
289
-
.clear(); // clear date range
290
-
.close(); // close date range picker overlay
291
-
.open(); // open date range picker overlay
292
-
.destroy(); // destroy all date range picker related things
293
-
```
294
-
295
-
296
45
###LICENSE###
297
-
This date range picker plugin is under MIT LICENSE
46
+
This date range picker plugin is under MIT LICENSE
0 commit comments