注： 由于此组件基于 create-api 实现，所以在使用之前，请确保自己了解过 。

    • 基本用法

    通过 - createDatePicker 创建一个组件实例，配置 min、max 设定选择的日期范围，还可以通过 value 设置当前选择的日期。

    1. export default {
    2.   methods: {
    3.     showDatePicker() {
    4.       if (!this.datePicker) {
    5.         this.datePicker = this.- createDatePicker({
    6.           title: 'Date Picker',
    7.           min: new Date(2008, 7, 8),
    8.           max: new Date(2020, 9, 20),
    9.           value: new Date(),
    10.           onSelect: this.selectHandle,
    11.           onCancel: this.cancelHandle
    12.         })
    13.       }
    14.  
    15.       this.datePicker.show()
    16.     },
    17.     selectHandle(date, selectedVal, selectedText) {
    18.       this.- createDialog({
    19.         type: 'warn',
    20.         content: `Selected Item: 
       - date: - {date} 
       - value: - {selectedVal.join(', ')} 
       - text: - {selectedText.join(' ')}`,
    21.         icon: 'cubeic-alert'
    22.       }).show()
    23.     },
    24.     cancelHandle() {
    25.       this.- createToast({
    26.         type: 'correct',
    27.         txt: 'Picker canceled',
    28.         time: 1000
    29.       }).show()
    30.     }
    31.   }
    32. }
    • 列的配置
      • 年月日时分秒选择器

      同理，如果想要年月日时分秒选择器，则是以“年”开始的六列。

      1. <cube-button @click="showDateTimePicker">Date Time Picker</cube-button>
      1. export default {
      2.   methods: {
      3.     showDateTimePicker() {
      4.       if (!this.dateTimePicker) {
      5.         this.dateTimePicker = this.- createDatePicker({
      6.           title: 'Date Time Picker',
      7.           min: new Date(2008, 7, 8, 8, 0, 0),
      8.           max: new Date(2020, 9, 20, 20, 59, 59),
      9.           value: new Date(),
      10.           columnCount: 6,
      11.           onSelect: this.selectHandle,
      12.           onCancel: this.cancelHandle
      13.         })
      14.       }
      15.  
      16.       this.dateTimePicker.show()
      17.     },
      18.     selectHandle(date, selectedVal, selectedText) {
      19.       this.- createDialog({
      20.         type: 'warn',
      21.         content: `Selected Item: 
         - date: - {date} 
         - value: - {selectedVal.join(', ')} 
         - text: - {selectedText.join(' ')}`,
      22.         icon: 'cubeic-alert'
      23.       }).show()
      24.     },
      25.     cancelHandle() {
      26.       this.- createToast({
      27.         type: 'correct',
      28.         txt: 'Picker canceled',
      29.         time: 1000
      30.       }).show()
      31.     }
      32.   }
      33. }
      • 日期格式

      你还可以通过 format 属性配置日期格式。

      1. export default {
      2.   methods: {
      3.       if (!this.formatPicker) {
      4.         this.formatPicker = this.- createDatePicker({
      5.           title: 'Use format',
      6.           min: new Date(2008, 7, 8),
      7.           max: new Date(2020, 9, 20),
      8.           value: new Date(),
      9.           format: {
      10.             year: 'YY年',
      11.             month: 'MM月',
      12.             date: '第 D 日'
      13.           },
      14.           onSelect: this.selectHandle,
      15.           onCancel: this.cancelHandle
      16.         })
      17.       }
      18.  
      19.       this.formatPicker.show()
      20.     },
      21.     selectHandle(date, selectedVal, selectedText) {
      22.       this.- createDialog({
      23.         type: 'warn',
      24.         content: `Selected Item: 
         - date: - {date} 
         - value: - {selectedVal.join(', ')} 
         - text: - {selectedText.join(' ')}`,
      25.         icon: 'cubeic-alert'
      26.       }).show()
      27.     },
      28.     cancelHandle() {
      29.       this.- createToast({
      30.         type: 'correct',
      31.         txt: 'Picker canceled',
      32.         time: 1000
      33.       }).show()
      34.     }
      35.   }
      36. }
      • updateProps
      1. <cube-button @click="showUpdatePropsPicker">Use - updateProps</cube-button>
      • format 子配置项

      原文:

      https://didi.github.io/cube-ui/#/zh-CN/docs/date-picker