JQuery date Range selector with source code download, jquery Selector

JQuery date Range selector with source code download, jquery Selector

JQuery Date Range Picker is a jQuery Date Picker that allows users to select a Date and time Range. The entire date selector plug-in uses CSS to render styles, making it easy to use CSS to customize skin. In addition, the browser has excellent compatibility and supports multiple time formats.

View demo download source code

Preparation

Using this date selector plug-in requires support from jQuery 1.3.2 + and Moment 2.2.0 +.

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

HTML Structure

Add the following html structure where you want to place the date selector, which is an input box.

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

Call plug-ins

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

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

Configuration parameters

The default configuration parameters of the date selector 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): The Date format of Moment. Click here to view the Moment document.

Separator (String): delimiter between date strings.

Language (String): the predefined languages are "en" and "cn ". You can use this parameter to customize the language. You can also set it to "auto" to allow the browser to detect the language by itself.

StartOfWeek (String): "Sunday" or "Monday ".

GetValue (Function): This Function is called when the date range is obtained from the DOM element. The context of the Function is set to datepicker DOM.

SetValue (Function): This Function is called when a date range is written 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): defines 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 it is set to 0, the minimum Number of days is not limited.

MaxDays (Number): This parameter defines the maximum Number of days in the date range. If it is set to 0, the maximum Number of days is not limited.

ShowShortcuts (Boolean): Specifies the shortcuts area.

Time (Object): If this parameter is allowed, the time range is added.

Shortcuts (Object): defines the shortcut key.

CustomShortcuts (Array): Specifies the custom shortcut key.

Inline (Boolean): renders the date selector in inline mode, instead of overlay mode. If this parameter is set to true, set the container parameter together.

Container (String, css selector | DOM Object): Specifies the date selector DOM element to be rendered.

AlwaysOpen (Boolean): If inline mode is used, you may want to render the date selector when loading the page. When this parameter is set to true, the "close" button is hidden.

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

BatchMode (false/'Week'/'month'): Automatic batch processing mode.

Event

When this date selector selects a date range in the DOM, three events are triggered.

$('#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    

Project address: https://github.com/longbill/jquery-date-range-picker

The above section describes how to download the jQuery date Range selector with source code. I hope it will be helpful to you. If you have any questions, please leave a message and the editor will reply to you in time. Thank you very much for your support for the help House website!