使用Vux的Datetime以及XNumber组件实现日期联动

其他 2018-11-21 20:22:25 阅读次数: 0

实现效果

知识储备

XNumber组件

安装

局部注册：

import { XNumber } from 'vux'

export default {
  components: {
    XNumber
  }
}

全局注册：

// 在入口文件全局引入

import Vue from 'vue'
import { XNumber } from 'vux'

Vue.component('x-number', XNumber)

使用

注：x-number只能在Group中使用

 <group>
    <x-number title="title" v-model="value"></x-number>
  </group>

属性

名字 类型 默认值 说明 版本要求
value number 0 表单值，使用v-model绑定 --
title string   标题 --
min number   最小值 --
max number   最大值 --
step number 1 步长 --
fillable boolean false 是否可填写 --
width string 50px 输入框宽度 --
button-style string square 按钮样式，可选值为square或者round --
align string right 按钮部分位置，默认在右边(right)，可选值为left和right --

   

样式变量

名字 默认值 说明 继承自变量
@number-button-font-color #3cc51f --  
@number-input-font-color  #666 --  
@number-button-enabled-border-color #ececec --  
@number-square-button-enabled-border-color #ececec -- @number-button-enabled-border-color
@number-round-button-enabled-border-color #3cc51f -- @number-button-font-color
@number-button-disabled-border-color #ececec -- @number-button-enabled-border-color
@number-round-button-disabled-border-color #ececec -- @number-button-enabled-border-color


Demo源码

<template>
  <div>
    <group :title="$t('Default')">
      <x-number :name="$t('Quantity')" :title="$t('Quantity')"></x-number>
    </group>

    <group :title="$t('listen')">
      <x-number :title="$t('Quantity')" v-model="changeValue" :min="0" @on-change="change"></x-number>
    </group>

    <group :title="$t('set width=100px')">
      <x-number :title="$t('Quantity')" width="100px"></x-number>
    </group>

    <group :title="$t('round style')">
      <x-number :title="$t('Quantity')" v-model="roundValue" button-style="round" :min="0" :max="5"></x-number>
    </group>

    <group :title="$t('set step=0.5')">
      <x-number :title="$t('Quantity')" :step="0.5"></x-number>
    </group>

    <group :title="$t('set value=1, min=-5 and max=8')">
      <x-number :title="$t('Quantity')" :min="-5" :max="8" :value="1"></x-number>
    </group>

    <group :title="$t('fillable = true')">
      <x-number :value="10" :title="$t('Quantity')" fillable></x-number>
    </group>

  </div>
</template>

<i18n>
Default:
  zh-CN: 默认
Quantity:
  zh-CN: 数量
listen:
  en: listen to on-change events (printed on console)
  zh-CN: 监听 on-change 事件，在调试窗口中输出
set width=100px:
  zh-CN: 设置宽度为100px
set step=0.5:
  zh-CN: 设置步长为0.5
set value=1, min=-5 and max=8:
  zh-CN: 设置值为1，最小值为-5，最大值为8
fillable = true:
  zh-CN: 设置可以输入
use with other group elements:
  zh-CN: 和其他group子元素一起使用
Switch Component:
  zh-CN: Switch 组件
round style:
  zh-CN: 圆形按钮
</i18n>

<script>
import { Group, XNumber, XSwitch, Divider } from 'vux'

export default {
  components: {
    XNumber,
    Group,
    XSwitch,
    Divider
  },
  data () {
    return {
      changeValue: 0,
      roundValue: 0
    }
  },
  methods: {
    change (val) {
      console.log('change', val)
    }
  }
}
</script>

Datetime组件

安装

局部注册：

import { Datetime } from 'vux'

export default {
  components: {
    Datetime
  }
}

全局注册：

// 在入口文件全局引入

import Vue from 'vue'
import { Datetime } from 'vux'

Vue.component('datetime', Datetime)

使用

需要在Group组件内使用

该组件支持以Plugin形式调用

// 以 plugin 形式使用时，请在入口处引入：
import { DatetimePlugin } from 'vux'
Vue.use(DatetimePlugin)

// 组件内使用
this.$vux.datetime.show({
  value: '', // 其他参数同 props
  onHide () {
    const _this = this
  },
  onShow () {
    const _this = this
  }
})

this.$vux.datetime.hide()

属性

参考官方文档：

https://doc.vux.li/zh-CN/components/datetime.html

事件

名字 参数 说明 版本要求
@on-change (value) 表单值变化时触发, 参数 (newVal) --
@on-clear -- 点击显示在中间的自定义按钮时触发 --
@on-show -- 弹窗显示时触发 --
@on-hide (type), type is one of [cancel, confirm] 弹窗关闭时触发 v2.7.4
@on-cancel -- 点击取消按钮或者遮罩时触发，等同于事件 on-hide(cancel) v2.7.4
@on-confirm (value) v2.9.0 支持该参数 点击确定按钮时触发，等同于事件 on-hide(confirm) v2.7.4

Demo源码

<template>
  <div>
    <div style="padding:15px;">
      <x-button type="primary" plain @click.native="showPlugin">{{ $t('Used as a plugin') }}</x-button>
    </div>

    <group :title="$t('Default format: YYYY-MM-DD')">
      <datetime
        v-model="value1"
        @on-change="change"
        :title="$t('Birthday')"
        @on-cancel="log('cancel')"
        @on-confirm="onConfirm"
        @on-hide="log('hide', $event)"></datetime>
    </group>

    <group :title="$t('Custom minute list: every 15 minutes')">
      <datetime v-model="minuteListValue" format="YYYY-MM-DD HH:mm" :minute-list="['00', '15', '30', '45']" @on-change="change" :title="$t('Birthday')"></datetime>
    </group>

    <group :title="$t('Custom hour list')">
      <datetime v-model="hourListValue" format="YYYY-MM-DD HH:mm" :hour-list="['09', '10', '11', '12', '13', '14', '15', '16']" :minute-list="['00', '15', '30', '45']" @on-change="change" :title="$t('Birthday')"></datetime>
    </group>

    <group title="Readonly">
      <datetime v-model="valueReadonly" :readonly="readonly" @on-change="change" :title="$t('Birthday')"></datetime>
    </group>
    <div style="padding:15px">
      <x-button type="primary" plain @click.native="readonly = !readonly"> {{ $t('Toggle readonly') }} </x-button>
    </div>

     <group :title="$t('Format display value')">
      <datetime v-model="formatValue" :display-format="formatValueFunction" @on-change="change" :title="$t('Birthday')"></datetime>
    </group>

    <div style="padding:15px;">
      <x-button type="primary" @click.native="formatValue = '2017-11-11'">{{ $t('Set value: 2017-11-11') }}</x-button>
    </div>

    <group :title="$t('Define range of hours')">
      <datetime v-model="limitHourValue" format="YYYY-MM-DD HH:mm" :min-hour=9 :max-hour=18 @on-change="change" :title="$t('Define range of hours')" :inline-desc="$t('Working hours: 09-18')"></datetime>
    </group>

    <group :title="$t('Set start-date and end-date') + ' 2015-11-11 ~ 2017-10-11'">
      <datetime v-model="limitHourValue" :start-date="startDate" :end-date="endDate" format="YYYY-MM-DD HH:mm" @on-change="change" :title="$t('Start time')"></datetime>
    </group>

     <group :title="$t('Set end-date only') + ' 2017-10-11'">
      <datetime v-model="onlySetEndDateValue" :end-date="onlySetEndDate" format="YYYY-MM-DD HH:mm" @on-change="change" :title="$t('Start time')"></datetime>
    </group>

    <group :title="$t('Format') + ': ' + format">
      <datetime v-model="value2" :format="format" @on-change="change" :title="$t('Start time')"></datetime>
    </group>

    <div style="padding:15px;">
      <x-button type="primary" @click.native="toggleFormat">{{ $t('Toggle format') }}</x-button>
    </div>

    <group title="noon">
      <datetime title="noon" v-model="noonValue" format="YYYY-MM-DD A"></datetime>
    </group>

    <group :title="$t('Placeholder')">
      <datetime v-model="value3" default-selected-value="2017-06-18 13" format="YYYY-MM-DD HH" :placeholder="$t('Please select')" @on-change="change" :title="$t('Start time')"></datetime>
    </group>

    <group :title="$t('Set default-selected-value to 2017-11-11')">
      <datetime v-model="value3_1" default-selected-value="2017-11-11" format="YYYY-MM-DD" :placeholder="$t('Please select')" @on-change="change" :title="$t('Start time')" :inline-desc=" $t('Current value') + `: ${value3_1}`"></datetime>
    </group>

    <group :title="$t('Set min-year and max-year')">
      <datetime v-model="value4" :placeholder="$t('Please select')" :min-year=2000 :max-year=2016 format="YYYY-MM-DD HH:mm" @on-change="change" :title="$t('Years after 2000')"></datetime>
    </group>

    <group :title="$t('Prop: compute-hours-function')">
      <datetime format="YYYY-MM-DD HH" v-model="computeHoursValue" :compute-hours-function="computeHoursFunction" :title="$t('Birthday')" @on-change="change"></datetime>
    </group>

    <group :title="$t('Prop: compute-days-function')">
      <datetime format="YYYY-MM-DD HH" v-model="computeDaysValue" :compute-days-function="computeDaysFunction" :title="$t('Birthday')" @on-change="change"></datetime>
    </group>

    <group :title="$t('Specified template text in Chinese')">
      <datetime v-model="value5" :placeholder="$t('Please select')" :min-year=2000 :max-year=2016 format="YYYY-MM-DD HH:mm" @on-change="change" :title="$t('Chinese')" year-row="{value}年" month-row="{value}月" day-row="{value}日" hour-row="{value}点" minute-row="{value}分" confirm-text="完成" cancel-text="取消"></datetime>
    </group>

    <group :title="$t('Show center button and clear the value')">
      <datetime v-model="value6" @on-change="change" :title="$t('Birthday')" clear-text="clear" @on-clear="clearValue"></datetime>
    </group>

    <group :title="$t('Show center button to set date to today')">
      <datetime v-model="value7" @on-change="change" :title="$t('Birthday')" clear-text="today" @on-clear="setToday"></datetime>
    </group>

     <group :title="$t('Custom trigger slot')">
      <datetime v-model="value7" @on-change="change" :title="$t('Birthday')" clear-text="today" @on-clear="setToday">
        <x-button>{{$t('Click me')}}</x-button>
      </datetime>
    </group>

    <group :title="$t('Required')">
      <datetime v-model="value8" :title="$t('Required')" clear-text="clear" @on-clear="clearValue8" :required="true"></datetime>
    </group>

    <group :title="$t('Use prop: show.sync (vue^2.3) to control visibility')">
      <datetime v-model="value9" @on-change="change" :title="$t('Birthday')" :show.sync="visibility"></datetime>
    </group>

    <div style="padding:15px;">
      <x-button type="primary" plain @click.native="visibility = true">显示</x-button>
    </div>

    <group :title="$t('Default format: YYYY-MM-DD')">
      <datetime
        :order-map="{
          year: 3,
          month: 2,
          day: 1
        }"
        v-model="value1"
        @on-change="change"
        title="customize column order"
        @on-cancel="log('cancel')"
        @on-confirm="onConfirm"
        @on-hide="log('hide', $event)"></datetime>
    </group>


  </div>
</template>

<i18n>
'Default format: YYYY-MM-DD':
  zh-CN: 默认格式：YYYY-MM-DD
Format:
  zh-CN: 格式
Start time:
  zh-CN: 开始时间
Placeholder:
  zh-CN: 提示文字
Please select:
  zh-CN: 请选择
Set min-year and max-year:
  zh-CN: 设置开始和结束年份
Years after 2000:
  zh-CN: 2000年以后的时间
Specified template text in Chinese:
  zh-CN: 自定义中文显示模板
Show center button and clear the value:
  zh-CN: 显示中间的清除按钮
Show center button to set date to today:
  zh-CN: 显示中间的设置日期为今天的按钮
Birthday:
  zh-CN: 生日
Chinese:
  zh-CN: 中文
Click me:
  zh-CN: 点我
Custom trigger slot:
  zh-CN: 自定义触发内容
Define range of hours:
  zh-CN: 限定小时范围
'Working hours: 09-18':
  zh-CN: 工作时间为 09-18
Set start-date and end-date:
  zh-CN: 设置开始时间和结束日期
'Click to change value to: 2017-11-11':
  zh-CN: 设置时间为 2017-11-11
Format display value:
  zh-CN: 格式化显示
Toggle format:
  zh-CN: 改变格式
'Custom minute list: every 15 minutes':
  zh-CN: 自定义分钟列表（每15分钟）
Custom hour list:
  zh-CN: 定义小时列表
'Use prop: show.sync (vue^2.3) to control visibility':
  zh-CN: '使用 prop: show.sync 控制显示(vue^2.3)'
Used as a plugin:
  zh-CN: 插件形式调用
Set default-selected-value to 2017-11-11:
  zh-CN: 设置默认选中值为 2017-11-11
'Prop: compute-hours-function':
  zh-CN: 自定义小时列表生成逻辑
'Prop: compute-days-function':
  zh-CN: 自定义日期列表生成逻辑
Toggle readonly:
  zh-CN: 切换 readonly 属性
'Set value: 2017-11-11':
  zh-CN: 设置时间为2017-11-11
Set end-date only:
  zh-CN: 只设置结束时间
</i18n>

<script>
import { Datetime, Group, XButton } from 'vux'

export default {
  components: {
    Datetime,
    Group,
    XButton
  },
  data () {
    return {
      noonValue: '2018-04-13 PM',
      readonly: true,
      minuteListValue: '2017-06-12 09:00',
      hourListValue: '2017-06-12 09:00',
      format: 'YYYY-MM-DD HH:mm',
      value1: '2015-11-12',
      valueReadonly: '2015-11-12',
      value2: '',
      value3: '',
      value3_1: '',
      value4: '',
      value5: '',
      value6: '2016-08-18',
      value7: '',
      value8: '',
      limitHourValue: '',
      startDate: '2015-11-11',
      endDate: '2017-10-11',
      formatValue: '2017-10-11',
      formatValueFunction (val) {
        return val.replace(/-/g, '$')
      },
      value9: '',
      visibility: false,
      computeHoursValue: '',
      computeDaysValue: '',
      computeHoursFunction (date, isToday, generateRange) {
        if (isToday) {
          return generateRange(new Date().getHours(), 23)
        } else {
          return generateRange(0, 23)
        }
      },
      computeDaysFunction (options, generateRange) {
        return [options.month] // if current month is n, days are [n]
      },
      onlySetEndDate: '2017-10-11',
      onlySetEndDateValue: ''
    }
  },
  methods: {
    log (str1, str2 = '') {
      console.log(str1, str2)
    },
    onConfirm (val) {
      console.log('on-confirm arg', val)
      console.log('current value', this.value1)
    },
    showPlugin () {
      this.$vux.datetime.show({
        cancelText: '取消',
        confirmText: '确定',
        format: 'YYYY-MM-DD HH',
        value: '2017-05-20 18',
        onConfirm (val) {
          console.log('plugin confirm', val)
        },
        onShow () {
          console.log('plugin show')
        },
        onHide () {
          console.log('plugin hide')
        }
      })
    },
    toggleFormat () {
      if (this.format === 'YYYY-MM-DD') {
        this.format = 'YYYY-MM-DD HH:mm'
      } else if (this.format === 'YYYY-MM-DD HH:mm') {
        this.format = 'YYYY-MM-DD'
      }
    },
    change (value) {
      console.log('change', value)
    },
    clearValue (value) {
      this.value6 = ''
    },
    clearValue8 (value) {
      this.value8 = ''
    },
    setToday (value) {
      let now = new Date()
      let cmonth = now.getMonth() + 1
      let day = now.getDate()
      if (cmonth < 10) cmonth = '0' + cmonth
      if (day < 10) day = '0' + day
      this.value7 = now.getFullYear() + '-' + cmonth + '-' + day
      console.log('set today ok')
    }
  }
}
</script>

<style scoped lang="less">
.center {
  padding-top: 10px;
  padding-left: 15px;
  color: green;
}
</style>

实现日期联动

在vue单页面中 

 <group class="mt_cd_0">

          <x-number class= " h_36em pb_0 pt_0"v-if="demandForm.flightTypeArray==2" title="出行天数" width="50px" :min="1"
           @on-change="changeReturnDate"
           v-model="demandForm.tripDays"></x-number>
  </group>

注：

v-if:业务需求，当为2时才显示这个控件

title:要显示的标题

width:宽度

:min:最小值为1，不能再往下减

@on-change:发生改变时执行的方法

 v-model：绑定的v-model的值

然后在data中声明：

 data() {
      return {   
        demandForm: {
          tripDays: 1,    
          goStartTime: '',
          goEndTime: '',
          returnStartTime: '',
          returnEndTime: '',
          demandCloseTime: '',
        }
      }
}

当x-number的值发生改变时，会执行changeReturnDate方法，所以在此方法中：

methods: {
      changeReturnDate(){
       if(this.demandForm.tripDays!=''&&this.demandForm.goStartTime!=''){
          var goStartTime=new Date(this.demandForm.goStartTime)
          var returnStartTime=new Date(this.demandForm.returnStartTime)
          returnStartTime=new Date(goStartTime.getTime() +this.demandForm.tripDays * 24 * 60 * 60 * 1000);
          this.demandForm.returnStartTime=dateFormat(returnStartTime, 'YYYY-MM-DD').toString();
        }
       if(this.demandForm.tripDays!=''&&this.demandForm.goEndTime!=''){
          var goEndTime=new Date(this.demandForm.goEndTime)
          var returnEndTime=new Date(this.demandForm.returnEndTime)
          returnEndTime=new Date(goEndTime.getTime()+this.demandForm.tripDays* 24 * 60 * 60 * 1000);
          this.demandForm.returnEndTime=dateFormat(returnEndTime, 'YYYY-MM-DD').toString();
        }
      },

注：

if(出行天数不为空&&去程开始时间不为空){

获取去程开始时间并转化为Date格式;

获取返程开始时间并转化为Date格式;

返程开始时间=转化为Date(去程开始时间的毫秒基数+去程天数的毫秒数)；

返程开始时间=按指定格式格式化后的时间并转换为String格式；

}

下面返程结束时间同理。

注意:

使用JS 获取去程开始时间n天后的时间：

 var nTime=new Date(goStartTime.getTime() +n* 24 * 60 * 60 * 1000);

猜你喜欢

转载自blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/84304625
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
laravle中orm简单的增删改查
文本分类 特征选取之CHI开方检验
Spark核心编程-WordCount
大数据开发实战系列之电信客服(1)
读书笔记 - 把时间当作朋友 by 李笑来
python 笔记--if else
SpringBoot/Mybatis/Druid, 多数据源MultiDataSource配置思路
排序三个整数
redis集群搭建【2】-Windows中Redis集群搭建
STM32F030驱动TM1650点亮4联数码管
每日归档
更多
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022