11#jQuery Date Range Picker Plugin#
22
3- v0.0.5
3+ v0.0.7
44
55jQuery Date Range Picker is a jQuery plugin that allows user to select a date range.
66
77* Requires jQuery 1.3.2+, Moment 2.2.0+
8- * Supports IE6 +, Firefox, Chrome, Safari and other standard HTML5 browsers.
8+ * Supports IE8 +, Firefox, Chrome, Safari and other standard HTML5 browsers.
99* Supports multi-language
1010* Fully CSS styled
1111* Written by Chunlong ( jszen.com )
@@ -17,6 +17,14 @@ jQuery Date Range Picker is a jQuery plugin that allows user to select a date ra
1717
1818![ screenshot] ( https://raw.github.com/longbill/jquery-date-range-picker/master/preview.jpg )
1919
20+ ##what's new in 0.0.7##
21+
22+ * add hovering effect on day elements
23+ * add sticky month mode
24+ * add single month mode
25+ * enable adding elements on each day element
26+ * available to hide the top bar
27+ * fix many bugs and style issues
2028
2129##what's new in 0.0.5##
2230
@@ -192,15 +200,47 @@ The resulting object then turns into `td` tag of the day attributes.</i>
192200<b>applyBtnClass (String)</b>
193201<i> Additional classes to add to the apply button </i>
194202
203+ <b>stickyMonths (Boolean)</b>
204+ <i>If true, there will only be one previous and one next button. Clicking them will change
205+ both the months. This setting will have no effect if singleDate option is set to true</i>
206+
207+ <b>singleMonth (Boolean || 'auto') Default value: 'auto'</b>
208+ <i>If true, it will show only one month instead of two months. You can select date range
209+ in the one month view. If this is set to 'auto', it will be changed to true if the screen width
210+ is lower than 480.</i>
211+
212+ <b>showDateFilter ( Function(Int time, Int date) )</b>
213+ <i>This is a callback function when creating each date element in the calendar. First paramter will
214+ be the timestamp of that day. Second parameter will be the date of that month.</i>
215+
216+ <b>customTopBar ( Function || String)</b>
217+ <i>If you set this parameter, it will use this value in the top bar.</i>
218+
219+ <b>extraClass (String)</b>
220+ <i>Set extra class name to the date range picker dom.</i>
221+
222+ <b>showTopbar (Boolean)</b>
223+ <i>If show the top bar.</i>
224+
195225
196226##Events##
197227
198- Three events will be triggered on the date range picker DOM
228+ Events will be triggered on the date range picker DOM
199229` ` ` javascript
200230$ (' #dom-id' )
201231.dateRangePicker ()
232+ .bind (' datepicker-first-date-selected' , function (event , obj )
233+ {
234+ /* This event will be triggered when first date is selected */
235+ console .log (obj);
236+ // obj will be something like this:
237+ // {
238+ // date1: (Date object of the earlier date)
239+ // }
240+ })
202241.bind (' datepicker-change' ,function (event ,obj )
203242{
243+ /* This event will be triggered when second date is selected */
204244 console .log (obj);
205245 // obj will be something like this:
206246 // {
@@ -211,26 +251,29 @@ $('#dom-id')
211251})
212252.bind (' datepicker-apply' ,function (event ,obj )
213253{
254+ /* This event will be triggered when user clicks on the apply button */
214255 console .log (obj);
215256})
216- .bind (' datepicker-open ' ,function ()
257+ .bind (' datepicker-close ' ,function ()
217258{
218- console .log (' open' );
259+ /* This event will be triggered before date range picker close animation */
260+ console .log (' before close' );
219261})
220- .bind (' datepicker-opened ' ,function ()
262+ .bind (' datepicker-closed ' ,function ()
221263{
222- // fires event after animation finishes
223- console .log (' opened ' );
264+ /* This event will be triggered after date range picker close animation */
265+ console .log (' after close ' );
224266})
225- .bind (' datepicker-close ' ,function ()
267+ .bind (' datepicker-open ' ,function ()
226268{
227- console .log (' close' );
269+ /* This event will be triggered before date range picker open animation */
270+ console .log (' before open' );
228271})
229- .bind (' datepicker-closed ' ,function ()
272+ .bind (' datepicker-opened ' ,function ()
230273{
231- // fires event after animation finishes
232- console .log (' closed ' );
233- });
274+ /* This event will be triggered after date range picker open animation */
275+ console .log (' after open ' );
276+ })
234277` ` `
235278
236279###APIs###
@@ -244,3 +287,7 @@ $(dom).data('dateRangePicker')
244287 .open (); // open date range picker overlay
245288 .destroy (); // destroy all date range picker related things
246289` ` `
290+
291+
292+ ###LICENSE###
293+ This date range picker plugin is under MIT LICENSE
0 commit comments