TimePicker.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  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: function minHour() {
  42. var _this = this;
  43. this.$nextTick(function () {
  44. _this.updateInnerValue();
  45. });
  46. },
  47. maxHour: function maxHour(value) {
  48. var _this$innerValue$spli = this.innerValue.split(':'),
  49. hour = _this$innerValue$spli[0],
  50. minute = _this$innerValue$spli[1];
  51. if (hour >= value) {
  52. this.innerValue = this.formatValue(value + ":" + minute);
  53. this.updateColumnValue();
  54. } else {
  55. this.updateInnerValue();
  56. }
  57. },
  58. minMinute: 'updateInnerValue',
  59. maxMinute: function maxMinute(value) {
  60. var _this$innerValue$spli2 = this.innerValue.split(':'),
  61. hour = _this$innerValue$spli2[0],
  62. minute = _this$innerValue$spli2[1];
  63. if (minute >= value) {
  64. this.innerValue = this.formatValue(hour + ":" + value);
  65. this.updateColumnValue();
  66. } else {
  67. this.updateInnerValue();
  68. }
  69. },
  70. value: function value(val) {
  71. val = this.formatValue(val);
  72. if (val !== this.innerValue) {
  73. this.innerValue = val;
  74. this.updateColumnValue();
  75. }
  76. }
  77. },
  78. methods: {
  79. formatValue: function formatValue(value) {
  80. if (!value) {
  81. value = padZero(this.minHour) + ":" + padZero(this.minMinute);
  82. }
  83. var _value$split = value.split(':'),
  84. hour = _value$split[0],
  85. minute = _value$split[1];
  86. hour = padZero(range(hour, this.minHour, this.maxHour));
  87. minute = padZero(range(minute, this.minMinute, this.maxMinute));
  88. return hour + ":" + minute;
  89. },
  90. updateInnerValue: function updateInnerValue() {
  91. var _this$getPicker$getIn = this.getPicker().getIndexes(),
  92. hourIndex = _this$getPicker$getIn[0],
  93. minuteIndex = _this$getPicker$getIn[1];
  94. var _this$originColumns = this.originColumns,
  95. hourColumn = _this$originColumns[0],
  96. minuteColumn = _this$originColumns[1];
  97. var hour = hourColumn.values[hourIndex] || hourColumn.values[0];
  98. var minute = minuteColumn.values[minuteIndex] || minuteColumn.values[0];
  99. this.innerValue = this.formatValue(hour + ":" + minute);
  100. this.updateColumnValue();
  101. },
  102. onChange: function onChange(picker) {
  103. var _this2 = this;
  104. this.updateInnerValue();
  105. this.$nextTick(function () {
  106. _this2.$nextTick(function () {
  107. // https://github.com/vant-ui/vant/issues/9775
  108. _this2.updateInnerValue();
  109. _this2.$emit('change', picker);
  110. });
  111. });
  112. },
  113. updateColumnValue: function updateColumnValue() {
  114. var _this3 = this;
  115. var formatter = this.formatter;
  116. var pair = this.innerValue.split(':');
  117. var values = [formatter('hour', pair[0]), formatter('minute', pair[1])];
  118. this.$nextTick(function () {
  119. _this3.getPicker().setValues(values);
  120. });
  121. }
  122. }
  123. });