美文网首页
ant的时间选择器a-date-picker范围规定时间

ant的时间选择器a-date-picker范围规定时间

作者: 老板下碗面 | 来源:发表于2021-07-01 20:28 被阅读0次

    碰到一个需求搞了好久,网上查了好多都找不到,最后还是找到一个大哥的,终于解决了


    xx

    需求是选择时间之后再选择时间段,而第二次选择只能在24小时内选择,别的不能选
    需要得到 2021-06-29 18:00 -- 20:00 的时间数据
    不废话

     <a-date-picker v-model="form.startDate"
                                               :disabled-date="disabledStartDate"
                                               :show-time="{formant:'HH:mm'}"
                                               format="YYYY-MM-DD HH:mm"
                                               placeholder="开始时间"
                                               @openChange="handleStartOpenChange" />
                                <a-date-picker v-model="form.endDate"
                                               :disabled-date="disabledEndDate"
                                               show-time
                                               format="YYYY-MM-DD HH:mm"
                                               placeholder="结束时间"
                                               :open="endOpen"
                                                @openChange="handleEndOpenChange" />
    
      form: {
                    startDate: null, //时间选择器开始时间
                    endDate: null, //时间选择器结束时间
                },
                endOpen: false,
    
     disabledStartDate(startValue) {
                const endValue = this.form.endDate
            },
            disabledEndDate(endValue) {
                const startValue = this.form.startDate
                if (!endValue || !startValue) {
                    return false
                }
    //左边条件是天数以后的禁用条件   右边相反
                return startValue.valueOf() + 86400000 <= endValue.valueOf() || startValue.valueOf() >= endValue.valueOf()
            },
            handleStartOpenChange(open) {
                if (!open) {
                    this.endOpen = true
                }
            },
            handleEndOpenChange(open) {
                this.endOpen = open
            },
    

    moment格式和字符串(“YYYY-MM-DD HH:mm:ss”)相互转化
    1、字符串 转换为 moment格式:
    一般是后台返回的时间字符串要显示在选择器上

      var timeString= '2020-12-12 00:00:00';
    
           var moment = moment ( timeString,'YYYY-MM-DD HH:mm:ss');
    

    2、moment 转化为 字符串:
    得到的是时间戳

          moment(moment).valueOf();
    

    更多方法官方https://momentjs.com/

    相关文章

      网友评论

          本文标题:ant的时间选择器a-date-picker范围规定时间

          本文链接:https://www.haomeiwen.com/subject/tslsultx.html