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

深藏阁楼爱情的钟 2023-10-18 11:28 13阅读 0赞

## 实现效果 ##

![Image 1][]![20181120161305367.gif][]

## 知识储备 ##

### 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中使用

#### 属性 ####

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

#### 样式变量 ####

<table> 
 <thead> 
  <tr> 
   <td>名字</td> 
   <td>默认值</td> 
   <td>说明</td> 
   <td>继承自变量</td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>@number-button-font-color</td> 
   <td>#3cc51f</td> 
   <td>--</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>@number-input-font-color</td> 
   <td>&nbsp;#666</td> 
   <td>--</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>@number-button-enabled-border-color</td> 
   <td>#ececec</td> 
   <td>--</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>@number-square-button-enabled-border-color</td> 
   <td>#ececec</td> 
   <td>--</td> 
   <td>@number-button-enabled-border-color</td> 
  </tr> 
  <tr> 
   <td>@number-round-button-enabled-border-color</td> 
   <td>#3cc51f</td> 
   <td>--</td> 
   <td>@number-button-font-color</td> 
  </tr> 
  <tr> 
   <td>@number-button-disabled-border-color</td> 
   <td>#ececec</td> 
   <td>--</td> 
   <td>@number-button-enabled-border-color</td> 
  </tr> 
  <tr> 
   <td>@number-round-button-disabled-border-color</td> 
   <td>#ececec</td> 
   <td>--</td> 
   <td>@number-button-enabled-border-color</td> 
  </tr> 
 </tbody> 
</table>

####    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][https_doc.vux.li_zh-CN_components_datetime.html]

#### 事件 ####

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

#### 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单页面中

注：

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);

[Image 1]: 
[20181120161305367.gif]: https://img-blog.csdnimg.cn/20181120161305367.gif
[https_doc.vux.li_zh-CN_components_datetime.html]: https://doc.vux.li/zh-CN/components/datetime.html