A tutorial on using jQuery date range selector

jQuery is a cross-browser JavaScript library that simplifies operations between HTML and JavaScript. In this article, we share with you a tutorial on how to use the jQuery date range selector.

Preparation:

Using this date picker plug-in requires the support of jQuery 1.3.2+ and Moment 2.2.0+.

<link rel="stylesheet" href="css/daterangepicker.css" /><script src="js/moment.min.js"></script><script src="js/jquery.daterangepicker.js"></script>

HTML structure

Add the following html structure where the date picker needs to be placed, which is an input box.

<input type="text" id="datepicker" value="">

Calling the plug-in

Calling the jQuery Date Range Picker plug-in is very simple, just like other common jQuery plug-ins:

$('#datepicker').dateRangePicker(option);

Configuration parameters

The date selection The default configuration parameters of the device are as follows:

{
    format: 'YYYY-MM-DD',
    separator: ' to ',
    language: 'auto',
    startOfWeek: 'sunday',// or monday
    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],    dayDivAttrs: [],    dayTdAttrs: [],    applyBtnClass: ''
}

format (String): Moment’s date format. Click here to view Moment documentation.

separator (String): The separator between date strings.

language (String): The predefined languages ​​are "en" and "cn". You can customize the language using this parameter. It can also be set to "auto" to let the browser detect the language itself.

startOfWeek (String): "sunday" or "monday".

getValue (Function): This function is called when getting the date range from the DOM element, and the context of the function is set to the datepicker DOM.

setValue (Function): This function is called when writing a date range to a DOM element.

startDate (String or false): Defines the earliest date allowed by the user, the format is the same as format.

endDate (String or false): Define the last date allowed by the user, the format is the same as format.

minDays (Number): This parameter defines the minimum number of days in the date range. If set to 0, it means there is no limit to the minimum number of days.

maxDays (Number): This parameter defines the maximum number of days in the date range. If set to 0, it means there is no limit to the maximum number of days.

showShortcuts (Boolean): Mr. or hide the shortcuts area.

time (Object): If this parameter is allowed, a time range selection will be added.

shortcuts (Object): Define shortcut key buttons.

customShortcuts (Array): Define custom shortcut keys buttons.

inline (Boolean): Use inline mode to render the date picker instead of overlay mode. If set to true, the container parameters must be set together.

container (String, css selector || DOM Object): The date selector DOM element to be rendered.

alwaysOpen (Boolean): If using inline mode, you may want to render the date picker when the page loads. When this parameter is set to true, the "close" button will be hidden.

singleDate (Boolean): Set to true to select a single date.

batchMode (false / 'week' / 'month'): Automatic batch processing mode.

Events

Three events will be triggered when the date picker selects a date range in the DOM.

$('#datepicker')
.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');
});

API

After you call $(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
    .clear();   // clear date range
    .close();   // close date range picker overlay
    .open();    // open date range picker overlay
    .destroy(); // destroy all date range picker related things

The above is a tutorial on how to use the jQuery date range selector. I hope it will be useful to everyone. help.

Related recommendations:

php verifies whether the format of a date is correct

Js method of obtaining the current date and time and other operations

Detailed explanation of how to get the current date and time in JavaScript

The above is the detailed content of A tutorial on using jQuery date range selector. For more information, please follow other related articles on the PHP Chinese website!