评论：仿elementui的datapicker范围时间插件(原创)   [查看原文]

六晓1
2020/3/25 23:16:14
可以在hide回调里转换下

冻手冻脚1
2019/11/27 9:16:11

写个获取今天日期的方法，然后给两个input分别赋值就行了


function getNow(s) {
    return s < 10 ? '0' + s : s;
}

function nowData() {
    var myDate = new Date();
    var year = myDate.getFullYear();
    var month = myDate.getMonth() + 1;
    var date = myDate.getDate();
    begindate = year + '-' + getNow(month) + "-" + getNow(date) + " " + '00:00:00';
    enddate = year + '-' + getNow(month) + "-" + getNow(date) + " " + '23:59:59';
    //插件的两个输入框赋值
    $('.control .c-datepicker-date-editor .now').val(begindate);
    $('.control .c-datepicker-date-editor .nowlast').val(enddate);
}

$('.J-datepicker-day').datePicker({
    hasShortcut: true,
    format: 'YYYY-MM-DD'
});

单个的年月日一个页面出现了多个  我复制的都是一样的   如何获得每个选中的日期

六晓1
2019/12/1 17:52:48

第一种，在回调里获取：


 $('.J-datepicker-day').datePicker({
     format: 'YYYY-MM-DD',
     hide: function(type) {
         // 可以在调用的html加个data-index='1'或加类名去区分是哪个
         console.info(this.$input.parents('.J-datepicker-day').index().data('index'))
         console.info(this.$input.eq(0).val());
         console.info('类型：', type)
     }
 });

第二种：普通jquery去获取


// 单个直接获取，范围组件遍历获得的元素去获取val
$('.J-datepicker-day').eq(0).find('input').val()

however0
2019/9/9 17:05:00
引入 moment.js 并且 还有 对应版本的jq

六晓1
2019/9/8 16:02:59

hide:function(type){
console.info(type);
   //  type==='shortcut' 选择快捷选项
}

weibingGuo0
2019/8/28 19:05:46
另外时间输入框可以输入字母

六晓1
2019/9/8 16:10:19

$('.J-datepicker-range .c-datepicker-data-input').on('change',function(){
    console.info(222)
 })

我试过，如果直接在绑定change的这个input输入，失去焦点是会正常触发change事件的。但是如果你想要的效果是获取时间选择器选择完后的操作，就请在hide事件里面去操作

六晓0
2019/9/8 16:00:25
已提交更新，等审核

六晓1
2019/9/8 16:12:07
只有月范围是不支持的

六晓1
2019/9/8 16:01:02
目前没有支持只有小时的， YYYY-MM-DD HH不支持

一叶飘零1
2019/7/25 20:11:32

附上简单的修改


// 设置日期选择框位置
function setContainerPos(_this) {
    var w = document.documentElement.clientWidth;
    var new_w = _this.$target.offset().left + _this.$target.width() + 60;

    var offset = _this.$target.offset();
    var height = _this.$target.outerHeight();
    if (w > new_w) {
        _this.pickerObject.$container.css({
            top: offset.top + height,
            left: offset.left
        });
    } else {
        _this.pickerObject.$container.css({
            top: offset.top + height,
            right: 60
        });
    }
}

六晓1
2019/7/11 22:28:53
没必要，添加成功失败如果是初始化的话，直接判断有没有这个元素就知道了，其他问题打开控制台就行。
选中的值可以在hide回调函数中拿到，具体例子看历史记录。

六晓0
2019/6/22 16:57:03
没看懂 给个代码

六晓1
2019/6/22 16:56:22
滚动的原理是普通div的滚动，判断scroll的位置，你的鼠标滚动这么大距离？慢慢滚就好了

曹义成-Bruce0
2019/7/11 11:32:09
这确实是个很大的问题

yujianjiuhao0
2019/7/30 18:27:53
我这边也是的，怎么解决

曹义成-Bruce0
2019/7/11 11:42:51
这是个大问题，估计作者是用mac开发的，不带鼠标的，鼠标中轮滚动间隔三四个是大bug

张操0
2022/6/16 10:12:10
大佬解决了吗，可以加个点击事件不，时分秒的

六晓1
2019/5/22 22:39:39
这个联动只是显示上的联动，选择的值是不会变化的，这是需求这么设计的。
如果想要不联动，只能用两个单个选择器去用，不要用范围选择

偌姒0
2019/5/24 15:47:10
自己改了你的插件 已实现我需要的功能 灰常感谢

偌姒0
2019/5/24 15:59:23
建议您出个这样的配置unlink-panels（true/false） 在范围选择器里取消两个日期面板之间的联动，个人感觉用处还是很大的