Vant DatetimePicker time selection

Introduced

Time selectors, which support dimensions such as date, year, time, and so on, are typically used with pop-up layer components

Introduced

import Vue from 'vue';
import { DatetimePicker } from 'vant';

Vue.use(DatetimePicker);

Code demo

Select the full time

<van-datetime-picker
  v-model="currentDate"
  type="datetime"
  :min-date="minDate"
  :max-date="maxDate"
/>

export default {
  data() {
    return {
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date()
    };
  }
};

Select a date (year and month day)

<van-datetime-picker
  v-model="currentDate"
  type="date"
  :min-date="minDate"
  :max-date="maxDate"
/>

export default {
  data() {
    return {
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date()
    };
  }
};

Select Date (Year and Month)

The option text can be formatted by passing in the formatter function

<van-datetime-picker
  v-model="currentDate"
  type="year-month"
  :min-date="minDate"
  :max-date="maxDate"
  :formatter="formatter"
/>

export default {
  data() {
    return {
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date()
    };
  },

  methods: {
    formatter(type, val) {
      if (type === 'year') {
        return `${val}年`;
      } else if (type === 'month') {
        return `${val}月`
      }
      return val;
    }
  }
}

Select the time

<van-datetime-picker
  v-model="currentTime"
  type="time"
  :min-hour="10"
  :max-hour="20"
/>

export default {
  data() {
    return {
      currentTime: '12:00'
    };
  }
};

Option filter

By passing in the filter function, you can filter the array of options for custom intervals

<van-datetime-picker
  v-model="currentTime"
  type="time"
  :filter="filter"
/>

export default {
  data() {
    return {
      currentTime: '12:00'
    };
  },

  methods: {
    filter(type, options) {
      if (type === 'minute') {
        return options.filter(option => option % 5 === 0);
      }

      return options;
    }
  }
};

Api

Props

DatePicker Props

The following props are supported when the time selector type is date or datetime

TimePicker Props

The following props are supported when the time selector type is time

Events

Method

Ref allows you to get the DatetimePicker instance and call the instance method, as detailed in the Component Instance Method

Problems

Does the page get stuck after setting min-date or max-date?

Be careful not to use a write like min-date""new Date()" directly in the template, which causes a new Date object to be passed in each time the component is rendered, and the new data to be passed in triggers the next rendering, which plunges into a dead loop.

The correct approach is to define min-date as a data in the data function.

Failed to initialize components on iOS systems?

If you're having trouble rendering components on iOS, make sure you're not creating a Date object with a writing like new Date ('2020-01-01'), iOS doesn't support a date format separated by a midline, which is new Date ('2020/01/01').

A detailed explanation of this problem: stackoverflow .

Can't operate components on the desktop side?

See Use on the desktop side.

Is there a year or month selector?

If you only need to select a year or month, it is recommended that you use the Picker component directly.