DatePicker 组件

1.7.0 新增

日期选择器，可用于日期选择，选择粒度的灵活配置，如年月日、时分秒、年月日时分秒、年月等。

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

示例

• 基本用法

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

<cube-button @click="showDatePicker">Date Picker</cube-button>

export default {
  methods: {
    showDatePicker() {
      if (!this.datePicker) {
        this.datePicker = this.- createDatePicker({
          title: 'Date Picker',
          min: new Date(2008, 7, 8),
          max: new Date(2020, 9, 20),
          value: new Date(),
          onSelect: this.selectHandle,
          onCancel: this.cancelHandle
        })
      }
 
      this.datePicker.show()
    },
    selectHandle(date, selectedVal, selectedText) {
      this.- createDialog({
        type: 'warn',
        content: `Selected Item: 
 - date: - {date} 
 - value: - {selectedVal.join(', ')} 
 - text: - {selectedText.join(' ')}`,
        icon: 'cubeic-alert'
      }).show()
    },
    cancelHandle() {
      this.- createToast({
        type: 'correct',
        txt: 'Picker canceled',
        time: 1000
      }).show()
    }
  }
}

• 列的配置

DatePicker 有一个非常灵活的能力，就是可以配置列，总共是年、月、日、时、分、秒六种的列，你可以通过 startColumn 和 columnCount 来配置起始列和列数，比如默认的”年月日“选择，是从“年”开始的“三列”，而时分秒，则是从“时”开始的“三列”。

<cube-button @click="showTimePicker">Time Picker</cube-button>

export default {
  methods: {
    showTimePicker() {
      if (!this.timePicker) {
        this.timePicker = this.- createDatePicker({
          title: 'Time Picker',
          min: [8, 0, 0],
          max: [20, 59, 59],
          value: new Date(),
          startColumn: 'hour',
          onSelect: this.selectHandle,
          onCancel: this.cancelHandle
        })
      }
 
      this.timePicker.show()
    },
    selectHandle(date, selectedVal, selectedText) {
      this.- createDialog({
        type: 'warn',
        content: `Selected Item: 
 - date: - {date} 
 - value: - {selectedVal.join(', ')} 
 - text: - {selectedText.join(' ')}`,
        icon: 'cubeic-alert'
      }).show()
    },
    cancelHandle() {
      this.- createToast({
        type: 'correct',
        txt: 'Picker canceled',
        time: 1000
      }).show()
    }
  }
}

• 年月日时分秒选择器

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

<cube-button @click="showDateTimePicker">Date Time Picker</cube-button>

export default {
  methods: {
    showDateTimePicker() {
      if (!this.dateTimePicker) {
        this.dateTimePicker = this.- createDatePicker({
          title: 'Date Time Picker',
          min: new Date(2008, 7, 8, 8, 0, 0),
          max: new Date(2020, 9, 20, 20, 59, 59),
          value: new Date(),
          columnCount: 6,
          onSelect: this.selectHandle,
          onCancel: this.cancelHandle
        })
      }
 
      this.dateTimePicker.show()
    },
    selectHandle(date, selectedVal, selectedText) {
      this.- createDialog({
        type: 'warn',
        content: `Selected Item: 
 - date: - {date} 
 - value: - {selectedVal.join(', ')} 
 - text: - {selectedText.join(' ')}`,
        icon: 'cubeic-alert'
      }).show()
    },
    cancelHandle() {
      this.- createToast({
        type: 'correct',
        txt: 'Picker canceled',
        time: 1000
      }).show()
    }
  }
}

• 日期格式

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

<cube-button @click="showFormatPicker">Use format</cube-button>

export default {
  methods: {
    showFormatPicker() {
      if (!this.formatPicker) {
        this.formatPicker = this.- createDatePicker({
          title: 'Use format',
          min: new Date(2008, 7, 8),
          max: new Date(2020, 9, 20),
          value: new Date(),
          format: {
            year: 'YY年',
            month: 'MM月',
            date: '第 D 日'
          },
          onSelect: this.selectHandle,
          onCancel: this.cancelHandle
        })
      }
 
      this.formatPicker.show()
    },
    selectHandle(date, selectedVal, selectedText) {
      this.- createDialog({
        type: 'warn',
        content: `Selected Item: 
 - date: - {date} 
 - value: - {selectedVal.join(', ')} 
 - text: - {selectedText.join(' ')}`,
        icon: 'cubeic-alert'
      }).show()
    },
    cancelHandle() {
      this.- createToast({
        type: 'correct',
        txt: 'Picker canceled',
        time: 1000
      }).show()
    }
  }
}

• updateProps

通过- updateProps方法，可以修改用 createAPI 创建的组件实例的属性。比如 DatePicker中，我们可以修改 value 属性的值改变当前选择的日期。

<cube-button @click="showUpdatePropsPicker">Use - updateProps</cube-button>

export default {
  methods: {
    showUpdatePropsPicker() {
      if (!this.updatePropsPicker) {
        this.updatePropsPicker = this.- createDatePicker({
          title: 'Use - updateProps',
          min: new Date(2008, 7, 8),
          max: new Date(2020, 9, 20),
          value: new Date(),
          onSelect: this.selectHandle,
          onCancel: this.cancelHandle
        })
      }
 
      this.updatePropsPicker.show()
      setTimeout(() => {
        this.updatePropsPicker.- updateProps({
          title: 'updated',
          value: new Date(2010, 9, 1)
        })
      }, 1000)
    },
    selectHandle(date, selectedVal, selectedText) {
      this.- createDialog({
        type: 'warn',
        content: `Selected Item: 
 - date: - {date} 
 - value: - {selectedVal.join(', ')} 
 - text: - {selectedText.join(' ')}`,
        icon: 'cubeic-alert'
      }).show()
    },
    cancelHandle() {
      this.- createToast({
        type: 'correct',
        txt: 'Picker canceled',
        time: 1000
      }).show()
    }
  }
}

Props 配置

• format 子配置项

事件

实例方法

原文:

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