Detailed explanation of bootstrap date plug-in daterangepicker example

This article mainly introduces in detail how to use the bootstrap date plug-in daterangepicker. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

I used the bootstrap date plug-in today and I feel that there is not a lot of information to search for. I will write down some experience of using it here:
Open source address of the plug-in: daterangepicker date control,
When using the plug-in, just follow the documentation in the open source When the information comes, just include the following references:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="moment.js"></script>
<script type="text/javascript" src="daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="daterangepicker-bs3.css" />

Contains references to jquery, bootstrap framework, and moment.js for date processing. Finally, load the js and css files of this plug-in
and then Like some jq plug-ins, this plug-in is also an extension of $.fn, so perform the following operations to use this control

<script type="text/javascript">
$(document).ready(function() {
 $(&#39;input[name="daterange"]&#39;).daterangepicker();
});
</script>

Use jq to get the element you want to insert and then run the daterangepicker function to use its default Styles and attributes,
But this alone is definitely not enough. The daterangepicker function can accept a parameter object and a callback function, as follows:

$('input[name="daterange"]').daterangepicker(
 { 
  format: 'YYYY-MM-DD',
  startDate: '2013-01-01',
  endDate: '2013-12-31'
 },
 function(start, end, label) {
  alert('A date range was chosen: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
 }
);

The callback function will be triggered after the date changes and has three parameters. Start time, end time and label name, you can perform the operations you want to perform here, such as ajax request

The above can build an English version of the date control

Next, we will focus on the two parameters locale and ranges

The first is the locale parameter. Locale is an important parameter for building local language applications (github says locale accepts objects Parameters, but the properties of the object are not specified)

The following are the locale default properties in the plug-in

{ 
applyLabel: ‘Apply', 
cancelLabel: ‘Cancel', 
fromLabel: ‘From', 
toLabel: ‘To', 
weekLabel: ‘W', 
customRangeLabel: ‘Custom Range', 
daysOfWeek: moment.weekdaysMin(), 
monthNames: moment.monthsShort(), 
firstDay: moment.localeData()._week.dow };

We only need to change these parameters to make this plug-in a Chinese plug-in

$('input[name=datetime]').daterangepicker({ 
    format: 'YYYY-MM-DD',
    startDate: '2013-01-01',
    endDate: new Date(),
    maxDate:new Date(),
    locale:{
      applyLabel: '确认',
      cancelLabel: '取消',
      fromLabel: '从',
      toLabel: '到',
      weekLabel: 'W',
      customRangeLabel: 'Custom Range',
      daysOfWeek:["日","一","二","三","四","五","六"],
      monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
    }
  }, function (start, end, label) {
    alert('A date range was chosen: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
  });

The effect is as follows:

Of course, you may want to achieve the effect in github and add a shortcut key for adding time:
Improvely.com
No problem, you can use the range parameter to implement:
The range parameter is also an object parameter {name:[start,end] name is the name of the shortcut key, and accepts an array representing the start and end of the time

$('input[name=datetime]').daterangepicker({ 
  format: 'YYYY-MM-DD',
  startDate: '2013-01-01',
  endDate: new Date(),
  maxDate:new Date(),
  locale:{
   applyLabel: '确认',
   cancelLabel: '取消',
   fromLabel: '从',
   toLabel: '到',
   weekLabel: 'W',
   customRangeLabel: '选择时间',
   daysOfWeek:["日","一","二","三","四","五","六"],
   monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
  },
  range: {
   "近期": ['2015-04-12',new Date()]
  }
 }, function (start, end, label) {
  alert('A date range was chosen: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
 });

The effect is as follows:

In this way, there is a Chinese date plug-in. Of course, there are other parameters that can be used, including adding your own class. You can write the bootstrap style to achieve the style you want, or you can use the radio time box function to achieve it. For details, you can carefully check the official documentation to build the time selection control you need.

Related recommendations:

How to use JQuery date plug-in datepicker_jquery

js date plug-in dateHelp gets this month, Three months, this year's date_javascript skills

How to use the JQuery date plug-in datepicker_jquery

The above is the detailed content of Detailed explanation of bootstrap date plug-in daterangepicker example. For more information, please follow other related articles on the PHP Chinese website!