bootstrap插件 datetimepicker开始月份设置bug

zorro 发布于2019-08-19 17:30 / 688人阅读

摘要：但是反过来，开始日期输入框中的可选结束月份却没有问题。初步判断是在设置开始月份的语句上有问题。看了一下源码，找到了原因，是行的代码应该是减，而不是加代码行修改为修改后显示正常

datetimepicker插件下载地址

代码如下：

//日期输入框
$("input").datetimepicker({
    format: "yyyy-mm",    //日期格式为“年-月”
    startView:3,          //开始的页面为月份选择页面
    minView: 3,           //最小页面为月份选择页面
    autoclose: true,
    language:"zh-CN"
});
$("input.dateStart").on("click",function(){
    //将后一个输入框的日期值设为结束日期
    $(this).datetimepicker("setEndDate",$(this).next().val());
});
$("input.dateEnd").on("click",function(){
    //将前一个输入框的日期值设为开始日期
    $(this).datetimepicker("setStartDate",$(this).prev().val());
});

在使用中发现，在设置开始日期输入框中的日期后，点击结束日期输入框时，显示的可选开始月份总是比开日期输入框中的月份晚两个月，比如，开始日期输入框中的日期为2016-01，那么结束日期输入框中显示的可选开始月份就是三月。但是反过来，开始日期输入框中的可选结束月份却没有问题。初步判断是在设置开始月份的语句上有问题。

看了一下源码，找到了原因，是630行的代码应该是减1，而不是加1

startYear = this.startDate !== -Infinity ? this.startDate.getUTCFullYear() : -Infinity,
//****************bug代码行**********************//
//startMonth = this.startDate !== -Infinity ? this.startDate.getUTCMonth() + 1 : -Infinity,
//******************修改为**********************//
startMonth = this.startDate !== -Infinity ? this.startDate.getUTCMonth() - 1 : -Infinity,
endYear = this.endDate !== Infinity ? this.endDate.getUTCFullYear() : Infinity,
endMonth = this.endDate !== Infinity ? this.endDate.getUTCMonth() + 1 : Infinity,

修改后显示正常：

云服务器 GPU云服务器图片插件bootstrap Bootstrap按钮插件 Bootstrap折叠插件 bootstrap3分页插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78586.html

用Vue搭建一个应用盒子（二）：datetime-picker

摘要：接着上次的进度，我们已经实现了一个。我们应该完成的效果是一个，日期选择器。好了，到这一步，还不能实现这个插件。我们还需要添加一个方法，因为并没有被执行，所以我们需要添加如下代码好了，这里事件选择插件就能顺利使用了。与的结合使用实例接着上次的进度，我们已经实现了一个todo-list。它已经具备了基本的功能，可以新建、编辑、删除任务。但是美中不足的是，它的时间设定上只能通过输入一段字符...

Ververica 2019-08-26 11:32 评论0 收藏0
bootstrap插件 datetimepicker位置bug

摘要：只要在初始化的下面按同样的方法初始化即可，插件的位置就不会定死在一个地方了。但是具体的显示位置还需要根据实际情况调整两行代码。 datetimepicker插件下载地址解压后看了一下给的例子，发现存在严重的插件位置错位问题百度之后，发现有人已经发现并给出了解决方案（bug反馈），但是我打开未压缩的代码并没有发现507行有这一行代码： top = top + document.bod...

ninefive 2019-08-19 17:30 评论0 收藏0
bootstrap datetimepicker日期插件美化

摘要：需求日期面板默认展开可以根据点击的日期，处理额外的信息，如在这天记录一些信息等大部分的日期插件日期面板是隐藏的，点击的时候日期面板显示，基于的日期插件如果是在元素上实例化插件的情况，面板是显示的，在上面板则是隐藏的。需求：（1）日期面板默认展开（2）可以根据点击的日期，处理额外的信息，如在这天记录一些信息等大部分的日期插件日期面板是隐藏的，点击input的时候日期面板显示，基于...

ninefive 2019-08-29 17:00 评论0 收藏0
bootstrap datetimepicker日期插件美化

摘要：需求日期面板默认展开可以根据点击的日期，处理额外的信息，如在这天记录一些信息等大部分的日期插件日期面板是隐藏的，点击的时候日期面板显示，基于的日期插件如果是在元素上实例化插件的情况，面板是显示的，在上面板则是隐藏的。需求：（1）日期面板默认展开（2）可以根据点击的日期，处理额外的信息，如在这天记录一些信息等大部分的日期插件日期面板是隐藏的，点击input的时候日期面板显示，基于...

miya 2019-08-23 12:22 评论0 收藏0
bootstrap的datetimepicker时分秒设为00:00:00

摘要：先上图片看效果今天遇到一个需求，需要选择日期的时候时分秒都要为当时这种写法并不好用自己改了一下插件实现效果如下需要支持中文的需要修改需要改成下面的效果。先上图片（看效果）showImg(https://segmentfault.com/img/bV1wOs?w=1890&h=488);showImg(https://segmentfault.com/img/bV1wOW?w=1858...

Aceyclee 2019-08-21 18:40 评论0 收藏0