澳门游戏平台大全 澳门十大电子游戏平台 浅谈Bootstrap的DatePicker日期范围选择

浅谈Bootstrap的DatePicker日期范围选择

您可以通过参数自定义相关配置,还可以通过回调函数在用户选择新的日期时获得通知。

两者功能很类似。使用方法也是差不多的。DatePicker支持更多的事件和设置。

其中这些配置可以组成一个配置为文件 然后再()中引入

然而当使用DateTimePicker插件点击清除按钮的时候,会报错 Uncaught
TypeError: Cannot read property ‘getTime’ of
null,结果导致changeDate事件也不能正常使用。

daterangepicker是bootstrap的一个日历插件 主要用来选择时间段的插件
这个插件很好用 也很容易操作

用日期插件时,经常会有一种需求。两个input框选择。开始时间小于结束时间,结束时间大于开始时间,开始时间和结束时间都不大于当前时间。

引入相关插件

Bootstrap DatePicker实现日期选择
开始日期不大于结束时间,结束时间不小于开始时间,开始日期和结束日期都不大于当前日期。

startDate: (Date 对象, moment 对象或者string类型)初始化日期范围选中的开始时间。endDate: (Date 对象, moment 对象或者string类型)初始化日期范围选中的结束时间。minDate: (Date 对象, moment 对象或者string类型) 用户可以选择的最早时间。maxDate: (Date 对象, moment 对象或者string类型) 用户可以选择的最晚时间。dateLimit:  选中的开始和结束日期之间最大时间间隔。可以是能够添加到moment对象中的任何属性。showDropdowns:  在日历上面显示年和月的下拉框,选中后将跳到指定的年和月showWeekNumbers:  在日历上每周开始的地方显示本地化的周编号。showISOWeekNumbers:  在日历上每周开始的地方显示国际标准的周编号。timePicker:  允许选择日期和时间,而不是局限于日期。timePickerIncrement:  时间选择框中分钟列的增加步长(如:设置为30后只允许选择以0和30结束的时间)。timePicker24Hour:  使用24小时制来代替12小时制,同时删除AM/PM选择框。timePickerSeconds:  在时间选择框中显示秒选择列。ranges:  设置用户可以选择的预定义日期范围。每个键名即范围的标签名,对应值是两个日期组成的数组,来表示范围的界限。showCustomRangeLabel:  当使用范围选项时,在预定义范围列表的末尾显示标记为"Custom Range"的标签。当选择的日期范围与任何一个预定义的范围都不匹配时,该选项将被高亮显示。单击它显示日历可以选择新的范围。alwaysShowCalendars:  通常,如果使用范围选项指定了预定义日期范围,则用户除了单击 "Custom Range"之外,日期选择器都不会显示用于选择自定义日期范围的日历。当选项设置为true时,将始终显示用于选择自定义日期范围的日历。opens: (string: 'left'/'right'/'center') 设置日期选择器以绑定元素左对齐、右对齐或者居中显示。drops: (string: 'down' or 'up') 设置日期选择器在绑定元素的下面或者上面显示。buttonClasses: 为日期选择器中的所有button元素添加CSS类。applyClass:  为日期选择器中的apply按钮添加类。cancelClass:  为日期选择器中的cancel按钮添加类。locale:  允许为按钮和标签提供本地化的字符串,自定义日期格式,并更改日历中周的第一天。 查看配置生成器中的“locale配置”,以了解如何自定义这些选项。singleDatePicker:  只显示一个日历来选择一个日期,而不是带有两个日历的范围选择器;回调函数中提供的开始和结束日期将和选择的单个日期相同。autoApply:  隐藏apply和cancel按钮。选择两个日期或预定义范围时,会自动应用新的日期范围。linkedCalendars:  启用时,显示的两个日历将始终为两个连续的月份,并且当单击日历上方的左侧或右侧箭头时,两个日历都将变化。 禁用时,两个日历可以单独变化并显示任何月/年。isInvalidDate:  在显示两个日历之前传递一个日期参数,然后通过返回true或false,标示该日期是否可供选择。isCustomDate:  在显示两个日历之前传递一个日期参数,然后将返回的CSS类名字符串传或者数组应用在日历中的该日期上。autoUpdateInput:  标示日期范围选择器是否应在初始化和所选日期改变时,自动更新绑定在元素上的值。parentEl:  给日期选择器添加父元素的jQuery选择器,如果没有提供,body将被作为父元素。

另外,DatePicker要使界面显示中文,也需要加载css。bootstrap-datepicker.zh-CN.min.js。

setStartDate(Date 对象, moment 对象或者string类型):
设置日期范围选择器中当前选择的开始日期为提供的日期 setEndDate(Date 对象,
moment 对象或者string类型):
设置日期范围选择器中当前选择的结束日期为提供的日期

我们当然可以用选择的结果来判断输入正确与否。但是更好的办法是让我们的日期选择插件做出一些限制。

有些应用需要“清除”而不是“取消”功能,这可以通过更改按钮标签监听cancel事件来实现:

所以就改用DatePicker插件。  

需要的元素添加该插件的调用方法:

然后当一个输入框日期变化(包括清除)的时候,changeDate事件触发,在其回调函数里修改另一个输入框的可选范围。 

$.daterangepicker({ locale: { cancelLabel: 'Clear' }});$.on('cancel.daterangepicker', function { $;});

Bootstrap搭配了很优秀的日期选择插件。DatePicker和DateTimePicker。

$.daterangepicker.on('apply.daterangepicker', function { console.log(picker.startDate.format; console.log(picker.endDate.format;

您可能感兴趣的文章:

  • bootstrap
    datepicker插件默认英文修改为中文
  • Bootstrap
    datepicker日期选择器插件使用详解
  • JS控件bootstrap
    datepicker使用方法详解
  • BootStrap Datepicker
    插件修改为默认中文的实现方法
  • bootstrap
    datepicker限定可选时间范围实现方法
  • bootstrap datepicker
    与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
  • BootStrap中Datepicker控件带中文的js文件
  • BootStrap的Datepicker控件使用心得分享
  • bootstrap中日历范围选择插件daterangepicker的使用详解

示例用法:

function DatePicker(beginSelector,endSelector){
  // 仅选择日期
  $(beginSelector).datepicker(
  {
   language: "zh-CN",
   autoclose: true,
   startView: 0,
   format: "yyyy-mm-dd",
   clearBtn:true,
   todayBtn:false,
   endDate:new Date()
  }).on('changeDate', function(ev){   
   if(ev.date){
    $(endSelector).datepicker('setStartDate', new Date(ev.date.valueOf()))
   }else{
    $(endSelector).datepicker('setStartDate',null);
   }
  })

  $(endSelector).datepicker(
  {
   language: "zh-CN",
   autoclose: true,
   startView:0,
   format: "yyyy-mm-dd",
   clearBtn:true,
   todayBtn:false,
   endDate:new Date()
  }).on('changeDate', function(ev){ 
   if(ev.date){
    $(beginSelector).datepicker('setEndDate', new Date(ev.date.valueOf()))
   }else{
    $(beginSelector).datepicker('setEndDate',new Date());
   } 

  })
}

DatePicker("#date_begin","#date_end");

您可以使用setStartDate和setEndDate方法以程序化的方式更新日期选择器中的startDate和endDate。
您也可以通过绑定到该元素上的data属性访问日期范围选择器对象及其功能和属性。

以上就是小编为大家带来的浅谈Bootstrap的DatePicker日期范围选择全部内容了,希望大家多多支持脚本之家~

向构造函数传一个回调函数作为参数是监听所选日期范围更改最简单的方法
,即使选择未更改,每次应用按钮被点击时,您也可以执行某些操作:

看api知道日期变化的时候会有一个事件changeDate。当选择的日期变化的时候,会调用我们给这个事件的回调。但是遗憾的是当我们直接在输入框中输入或删除日期的时候貌似并不会触发到这个事件。所以可以把input框添加属性
readonly。只读状态,并且给日期控件一个清除按钮。这样日期的变化正常情况下就只有通过日期插件来控制了。

事件

下面是代码:

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

日期选择器绑定的元素可以触发以下几个事件,这些事件,您都可以进行监听。

var dateLongRangePickerOptionObj = { minDate: '2015/01/01 00:00:00', //最小时间 showDropdowns: true, showWeekNumbers: false, //是否显示第几周 dateLimit: {days: 300}, //起止时间的最大间隔 timePicker: true, timePickerIncrement: 1, //时间的增量,单位为分钟 timePicker12Hour: false, opens: 'right', //日期选择框的弹出位置 buttonClasses: ['btn btn-default'], applyClass: 'btn-small btn-primary blue', cancelClass: 'btn-small', format: 'YYYY/MM/DD HH:mm:ss', //控件中from和to 显示的日期格式MM/DD/YYYY separator: '-', defaultDate: new Date(), locale: { applyLabel: '确定', cancelLabel: '取消', fromLabel: '起始时间', toLabel: '结束时间', daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'], monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], firstDay: 1 }}

show.daterangepicker: 日期选择器显示后触发事件 hide.daterangepicker:
日期选择器隐藏后触发事件 showCalendar.daterangepicker:
日历显示后触发事件 hideCalendar.daterangepicker: 日历隐藏后触发事件
apply.daterangepicker:
apply按钮被点击,或者预定义范围标签被点击时触发事件
cancel.daterangepicker: cancel按钮被点击时

// 创建一个新的日期范围选择器$.daterangepicker({ startDate: '03/05/2005', endDate: '03/06/2005' });// 改变日期选择器中选中的日期范围$.data.setStartDate;$.data.setEndDate;

配置文件

以上所述是小编给大家介绍的bootstrap中日历范围选择插件daterangepicker的使用详解
,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

 $('input[name=dateStr]', '#themeAddPage').daterangepicker(dateRangePickerAfterTodayConfig);

方法

总结

$('input[name="daterange"]').daterangepicker();

配置选项

标签:, , , ,

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图