DatePicker 日期选择

基本用法

日期选择(不显示中文)

  1. <nut-datepicker
  2. :is-visible="isVisible"
  3. type="date"
  4. title="请选择日期"
  5. :is-show-chinese="false"
  6. @close="switchPicker('isVisible')"
  7. @choose="setChooseValue"
  8. >
  9. </nut-datepicker>

日期选择(限制开始结束时间)

  1. <nut-datepicker
  2. :is-visible="isVisible1"
  3. title="请选择日期"
  4. type="date"
  5. startDate="1991-11-10"
  6. endDate="2019-10-05"
  7. @close="switchPicker('isVisible1')"
  8. @choose="setChooseValue1"
  9. >
  10. </nut-datepicker>

日期时间选择(有默认值,限制开始结束时间,限制到时分)

  1. <nut-datepicker
  2. :is-visible="isVisible2"
  3. title="请选择日期时间"
  4. type="datetime"
  5. startDate="2000-11-10 12:08"
  6. endDate="2030-10-05 10:04"
  7. defaultValue="2018-11-02 11:08"
  8. @close="switchPicker('isVisible2')"
  9. @choose="setChooseValue2"
  10. >
  11. </nut-datepicker>

时间选择(12小时制)

  1. <nut-datepicker
  2. :is-visible="isVisible3"
  3. type="time"
  4. title="请选择时间"
  5. @close="switchPicker('isVisible3')"
  6. @choose="setChooseValue3"
  7. :is-use12-hours="true"
  8. defaultValue="01:07"
  9. :is-am="false"
  10. >
  11. </nut-datepicker>

时间选择(限制开始结束小时)

  1. <nut-datepicker
  2. :is-visible="isVisible4"
  3. type="time"
  4. title="请选择时间"
  5. startHour="8"
  6. endHour="18"
  7. defaultValue="09:06"
  8. @close="switchPicker('isVisible4')"
  9. @choose="setChooseValue4"
  10. >
  11. </nut-datepicker>

时间选择(分钟数递增步长设置)

  1. <nut-datepicker
  2. :is-visible="isVisible5"
  3. type="time"
  4. title="请选择时间"
  5. :minute-step="5"
  6. defaultValue="10:30"
  7. @close="switchPicker('isVisible5')"
  8. @choose="setChooseValue5"
  9. >
  10. </nut-datepicker>
  1. export default {
  2. data() {
  3. return {
  4. isVisible: false,
  5. isVisible1: false,
  6. isVisible2: false,
  7. isVisible3: false,
  8. isVisible4: false,
  9. isVisible5: false,
  10. date: null,
  11. date1: null,
  12. datetime: '2018-11-02 11:08',
  13. time: '01:07',
  14. time1: '09:06',
  15. time2: '10:30',
  16. amOrPm: 'PM'
  17. };
  18. },
  19. methods: {
  20. switchPicker(param) {
  21. this[`${param}`] = !this[`${param}`];
  22. },
  23. setChooseValue(param) {
  24. this.date = param[3];
  25. },
  26. setChooseValue1(param) {
  27. this.date1 = param[3];
  28. },
  29. setChooseValue2(param) {
  30. this.datetime = param[5];
  31. },
  32. setChooseValue3(param) {
  33. this.amOrPm = param[2] == '上午' ? 'AM' : 'PM';
  34. this.time = param[3];
  35. },
  36. setChooseValue4(param) {
  37. this.time1 = param[2];
  38. },
  39. setChooseValue5(param) {
  40. this.time2 = param[2];
  41. }
  42. }
  43. }

Prop

字段说明类型默认值
type类型,日期’date’, 日期时间’datetime’,时间’time’String‘date’
isVisible是否可见Booleanfalse
isUse12Hours是否十二小时制度,只限类型为’time’时使用Booleanfalse
isAm是否上午Booleantrue
minuteStep分钟步进值String1
isShowChinese每列是否展示中文Booleantrue
title设置标题Stringnull
defaultValue默认值Stringnull
startDate开始日期String‘2000-01-01’
endDate结束日期String今天
startHour开始小时Number1
endHour结束小时Number23
isSetSecond是否支持秒,仅限type类型为’time’时支持Booleanfalse

Event

字段说明回调参数
choose点击确认按钮时候回调返回日期时间
close关闭时触发-

DatePicker 日期选择 - 图1