Home > Web Front-end > JS Tutorial > body text

Detailed explanation of the use of daterangepicker calendar plug-in

php中世界最好的语言
Release: 2018-04-19 16:21:47
Original
4583 people have browsed it

This time I will bring you a detailed explanation of the use of the daterangepicker calendar plug-in. What are the precautions for using the daterangepicker calendar plug-in? The following is a practical case, let's take a look.

Display specific time hours, minutes and seconds:

timePicker is set to true, //The pickerTime written in some materials is not quite right

Key pitfalls: modify the default display format of time, change Fomat is written in the locale. Many information on the Internet says that it is written directly in the daterangepicker attribute, which is not effective.

The start and end time can be set to a specific year, month and day or the current date can be generated (new Date() or moment() [moment() method is a function for moment.js to obtain the current time])

$(“#dateid”).daterangepicker({
      startDate: moment(),// '2013-01-01', 
      maxDate:newDate(),
      endDate: moment(),//new Date(),
      dateLimit : {
        days : 30
      },//起止时间的最大间隔
      timePicker :true,//是否显示小时和分钟
      timePickerIncrement : 1,//时间的增量,单位为分钟
      timePicker24Hour :true,//是否使用24小时制来显示时间
      locale: {//用来设置默认时间显示格式,各个按钮空间的中文显示
format:'YYYY/MM/DD HH:mm:ss',
applyLabel:'确认',
       cancelLabel:'取消',
       fromLabel:'从',
       toLabel:'到',
       weekLabel:'W',
       customRangeLabel:'选择时间',
       daysOfWeek:["日","一","二","三","四","五","六"],
       monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十 一月","十二月"] 
}
    range: {//设置快捷区间控件,不同的时间段
      "近期": ['2015-04-12',newDate()]
    }
  },function(start, end, label) {
    alert('A date range was chosen: '+ start.format('YYYY-MM-DD') +' to '+ end.format('YYYY-MM-DD'));
  }
Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the use of jquery plug-in extension

How jQuery determines the browser version

base64 implements encryption and decryption functions

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template