TimePicker.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import { createNamespace } from '../utils';
  3. import { padZero } from '../utils/format/string';
  4. import { range } from '../utils/format/number';
  5. import { sharedProps, TimePickerMixin } from './shared';
  6. var _createNamespace = createNamespace('time-picker'),
  7. createComponent = _createNamespace[0];
  8. export default createComponent({
  9. mixins: [TimePickerMixin],
  10. props: _extends({}, sharedProps, {
  11. minHour: {
  12. type: [Number, String],
  13. default: 0
  14. },
  15. maxHour: {
  16. type: [Number, String],
  17. default: 23
  18. },
  19. minMinute: {
  20. type: [Number, String],
  21. default: 0
  22. },
  23. maxMinute: {
  24. type: [Number, String],
  25. default: 59
  26. }
  27. }),
  28. computed: {
  29. ranges: function ranges() {
  30. return [{
  31. type: 'hour',
  32. range: [+this.minHour, +this.maxHour]
  33. }, {
  34. type: 'minute',
  35. range: [+this.minMinute, +this.maxMinute]
  36. }];
  37. }
  38. },
  39. watch: {
  40. filter: 'updateInnerValue',
  41. minHour: 'updateInnerValue',
  42. maxHour: 'updateInnerValue',
  43. minMinute: 'updateInnerValue',
  44. maxMinute: 'updateInnerValue',
  45. value: function value(val) {
  46. val = this.formatValue(val);
  47. if (val !== this.innerValue) {
  48. this.innerValue = val;
  49. this.updateColumnValue();
  50. }
  51. }
  52. },
  53. methods: {
  54. formatValue: function formatValue(value) {
  55. if (!value) {
  56. value = padZero(this.minHour) + ":" + padZero(this.minMinute);
  57. }
  58. var _value$split = value.split(':'),
  59. hour = _value$split[0],
  60. minute = _value$split[1];
  61. hour = padZero(range(hour, this.minHour, this.maxHour));
  62. minute = padZero(range(minute, this.minMinute, this.maxMinute));
  63. return hour + ":" + minute;
  64. },
  65. updateInnerValue: function updateInnerValue() {
  66. var _this$getPicker$getIn = this.getPicker().getIndexes(),
  67. hourIndex = _this$getPicker$getIn[0],
  68. minuteIndex = _this$getPicker$getIn[1];
  69. var _this$originColumns = this.originColumns,
  70. hourColumn = _this$originColumns[0],
  71. minuteColumn = _this$originColumns[1];
  72. var hour = hourColumn.values[hourIndex] || hourColumn.values[0];
  73. var minute = minuteColumn.values[minuteIndex] || minuteColumn.values[0];
  74. this.innerValue = this.formatValue(hour + ":" + minute);
  75. this.updateColumnValue();
  76. },
  77. onChange: function onChange(picker) {
  78. var _this = this;
  79. this.updateInnerValue();
  80. this.$nextTick(function () {
  81. _this.$nextTick(function () {
  82. _this.$emit('change', picker);
  83. });
  84. });
  85. },
  86. updateColumnValue: function updateColumnValue() {
  87. var _this2 = this;
  88. var formatter = this.formatter;
  89. var pair = this.innerValue.split(':');
  90. var values = [formatter('hour', pair[0]), formatter('minute', pair[1])];
  91. this.$nextTick(function () {
  92. _this2.getPicker().setValues(values);
  93. });
  94. }
  95. }
  96. });