AntDesign Vue 中时间段选择器a-range-picker

17 篇文章 1 订阅

无初始值的时间选择器

在这里插入图片描述

<template>
  <div>
    <a-card>
      <a-form class="ant-advanced-search-form" :form="form">
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-item label="订单类型">
              <a-select v-model="orderType" style="width:100%" allowClear>
                <a-select-option :value="item.orderTypeId" v-for="(item, i) in orderTypeArr" :key="i">
                  {{ item.typeName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="起始时间">
              <a-range-picker style="width: 100%" v-decorator="['range']" />
            </a-form-item>
          </a-col>
          <a-col :span="6" class="pt-4">
            <a-button type="primary" @click="search">
              搜索
            </a-button>
            <a-button :style="{ marginLeft: '8px' }" @click="reset">
              重置
            </a-button>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
  </div>
</template>

<script>
import { getOrderTypeList } from '@/api/basicdatas/OrderType'
export default {
  data() {
    return {
      form: this.$form.createForm(this, { name: 'acceptance' }),
      orderTypeArr: [],
      orderType: ''
    }
  },
  mounted() {
    getOrderTypeList().then(res => {
      this.orderTypeArr = res.rows
    })
  },
  methods: {
    search() {
      this.form.validateFields((err, fieldsValue) => {
        let query = {}
        console.log(111, err, fieldsValue)
        if (fieldsValue.range && fieldsValue.range.length > 0) {
          query = {
            startTime: fieldsValue['range'][0].format('YYYY-MM-DD'),
            endTime: fieldsValue['range'][1].format('YYYY-MM-DD')
          }
        } else {
          query = {
            startTime: '',
            endTime: ''
          }
        }
        console.log('搜索条件', Object.assign({ orderType: this.orderType || '' }, query))
      })
    },
    reset() {
      this.orderType = ''
      this.form.resetFields()
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.ant-advanced-search-form .ant-form-item {
  display: flex;
}

/deep/.ant-advanced-search-form .ant-form-item-control-wrapper {
  flex: 1;
}
</style>

需要初始值的时间选择器

在这里插入图片描述

设置初始值 initialValue,如果初始值是异步获取或是参数携带过来的可使用设置功能来赋值初始值,如果是死的可用initialValue

<template>
  <div>
    <a-form :form="form">
      <a-form-item label="RangePicker">
        <a-range-picker v-decorator="['rangetime',{initialValue:defaultTime}]" @change="onChangeRangeDate" format="YYYY-MM-DD" :placeholder="['开始时间', '结束时间']"/>
      </a-form-item>
      <a-button type="primary" @click="submit">
        提交
      </a-button>
      <a-button type="primary" @click="reset">
        重置
      </a-button>
      <a-button type="primary" @click="modify">
        修改
      </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script>
import moment from 'moment'
export default {
  data () {
    return {
      defaultTime: [moment('2021-05-13', 'YYYY-MM-DD'), moment('2021-05-18', 'YYYY-MM-DD')],
      start: '2021-05-13',
      end: '2021-05-18',
      form: this.$form.createForm(this, { name: 'time_related_controls' })
    }
  },
  mounted () {

  },
  methods: {
    moment,
    // 监听选择框改变
    onChangeRangeDate (value, dateString) {
      console.log(dateString)
      this.start = dateString[0]
      this.end = dateString[1]
    },
    // 重置时间为空
    reset () {
      this.form.setFieldsValue({
        'rangetime': []
      })
      this.start = ''
      this.end = ''
    },
    // 设置时间
    modify () {
      this.form.setFieldsValue({
        'rangetime': [moment('2021-05-22'), moment('2021-05-28')]
      })
      this.start = '2021-05-22'
      this.end = '2021-05-28'
    },
    // 提交获取时间
    submit () {
      this.form.validateFields((err, values) => {
        console.log('Received values of form: ', err, values)
        console.log(this.start, this.end)
      })
    }
  }
}
</script>


### 回答1: Ant Design Vue 提供了一些组件用于选择时间,如 DatePicker、TimePickerRangePicker。如果您需要对时间进行选择限制,可以通过这些组件的 props 或者事件来实现。 以下是一些示例: 1. DatePicker 组件限制选择的日期: ```html <template> <a-date-picker :disabledDate="disabledDate" /> </template> <script> export default { methods: { disabledDate(current) { // 不允许选择今天之前的日期 return current && current < moment().subtract(1, 'day') } } } </script> ``` 在这个例子,通过在 `disabledDate` 方法判断当前日期是否小于昨天,来禁用选择今天之前的日期。 2. TimePicker 组件限制选择的时间: ```html <template> <a-time-picker :disabledHours="disabledHours" /> </template> <script> export default { methods: { disabledHours() { // 不允许选择下午1点到下午3点之间的时间 return [13, 14, 15] } } } </script> ``` 在这个例子,通过在 `disabledHours` 方法返回一个数组来禁用下午1点到下午3点之间的时间。 3. RangePicker 组件限制选择的时间范围: ```html <template> <a-range-picker :disabledDate="disabledDate" /> </template> <script> export default { methods: { disabledDate(current) { // 不允许选择今天之前的日期和明天之后的日期 return current && (current < moment().subtract(1, 'day') || current > moment().add(1, 'day')) } } } </script> ``` 在这个例子,通过在 `disabledDate` 方法判断当前日期是否小于昨天或者大于明天,来禁用选择今天之前的日期和明天之后的日期。 这些示例只是一些简单的限制方式,您可以根据具体需求来自定义限制方法。 ### 回答2: Ant Design Vue是一套基于Vue.js的UI框架,提供了丰富的组件和样式,可以帮助我们快速搭建页面。在Ant Design Vue,时间选择器组件是常用的组件之一。 Ant Design Vue的时间选择器组件提供了一些选项来限制用户选择的时间范围。可以通过设置`disabledHours`、`disabledMinutes`和`disabledSeconds`属性来禁用特定的小时、分钟和秒钟。比如,如果我们要禁用每天的上午9点到下午6点之间的时间,可以这样设置: ```html <template> <a-time-picker :disabled-hours="disabledHours" :disabled-minutes="disabledMinutes" :disabled-seconds="disabledSeconds" ></a-time-picker> </template> <script> export default { data() { return { disabledHours() { return [9,10,11,12,13,14,15,16,17,18]; }, disabledMinutes(hour) { if (hour >= 9 && hour < 18) { return [0, 15, 30, 45]; } return []; }, disabledSeconds(hour, minute) { if (hour >= 9 && hour < 18 && minute >= 45) { return [0, 15, 30]; } return []; } } } } </script> ``` 上述代码,`disabledHours`方法返回一个数组,其包含了要禁用的小时。`disabledMinutes`和`disabledSeconds`方法分别接收`hour`和`minute`参数,根据参数的值来确定要禁用的分钟和秒钟。 通过上述设置,用户在时间选择器就只能选择上午9点到下午6点之外的时间了。 除了禁用特定时间段Ant Design Vue的时间选择器组件还提供了其他的限制选项,例如通过设置`showNow`属性为`false`来隐藏"此刻"按钮,通过设置`format`属性来限制显示的时间格式等等。 总之,Ant Design Vue的时间选择器组件提供了丰富的限制选项,可以满足我们各种时间选择的需求。 ### 回答3: Ant Design Vue 是一款基于 Vue.js 的 UI 组件库,它提供了丰富的组件和功能来帮助开发者构建漂亮的用户界面。在 Ant Design Vue ,我们可以使用 TimePicker 组件来选择时间。 TimePicker 组件具有一些时间限制的功能,可以限制用户选择的时间范围。我们可以通过设置 TimePicker 的 `disabledHours` 属性来限制用户选择的小时范围。例如,如果我们希望用户只能选择上午 9 点到下午 6 点之间的时间,我们可以将 `disabledHours` 设置为一个函数,该函数返回一个数组,数组表示不可选的小时。这样,用户就只能在这个时间范围内选择小时。 除了小时的限制,我们还可以使用 `disabledMinutes` 属性来限制用户选择的分钟范围。同样,我们可以将 `disabledMinutes` 设置为一个函数,该函数返回一个数组,数组表示不可选的分钟。这样,用户就只能在指定的分钟范围内选择分钟。 同时,TimePicker 还提供了许多其他的属性和功能,如清除已选时间、禁用 TimePicker 等,可以根据实际需要进行设置。 总之,Ant Design Vue 的 TimePicker 组件提供了丰富的时间限制功能,可以帮助开发者在选择时间时加以限制,以适应不同的场景需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小曲曲

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值