SkuDateTimeField.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. exports.__esModule = true;
  4. exports.default = void 0;
  5. var _utils = require("../../utils");
  6. var _timeHelper = require("../utils/time-helper");
  7. var _popup = _interopRequireDefault(require("../../popup"));
  8. var _datetimePicker = _interopRequireDefault(require("../../datetime-picker"));
  9. var _field = _interopRequireDefault(require("../../field"));
  10. // Utils
  11. // Components
  12. var namespace = (0, _utils.createNamespace)('sku-datetime-field');
  13. var createComponent = namespace[0];
  14. var t = namespace[2];
  15. var _default = createComponent({
  16. props: {
  17. value: String,
  18. label: String,
  19. required: Boolean,
  20. placeholder: String,
  21. type: {
  22. type: String,
  23. default: 'date'
  24. }
  25. },
  26. data: function data() {
  27. return {
  28. showDatePicker: false,
  29. currentDate: this.type === 'time' ? '' : new Date(),
  30. minDate: new Date(new Date().getFullYear() - 60, 0, 1)
  31. };
  32. },
  33. watch: {
  34. value: function value(val) {
  35. switch (this.type) {
  36. case 'time':
  37. this.currentDate = val;
  38. break;
  39. case 'date':
  40. case 'datetime':
  41. this.currentDate = (0, _timeHelper.stringToDate)(val) || new Date();
  42. break;
  43. }
  44. }
  45. },
  46. computed: {
  47. title: function title() {
  48. return t("title." + this.type);
  49. }
  50. },
  51. methods: {
  52. onClick: function onClick() {
  53. this.showDatePicker = true;
  54. },
  55. onConfirm: function onConfirm(val) {
  56. var data = val;
  57. if (this.type !== 'time') {
  58. data = (0, _timeHelper.dateToString)(val, this.type);
  59. }
  60. this.$emit('input', data);
  61. this.showDatePicker = false;
  62. },
  63. onCancel: function onCancel() {
  64. this.showDatePicker = false;
  65. },
  66. formatter: function formatter(type, val) {
  67. var word = t("format." + type);
  68. return "" + val + word;
  69. }
  70. },
  71. render: function render() {
  72. var _this = this;
  73. var h = arguments[0];
  74. return h(_field.default, {
  75. "attrs": {
  76. "readonly": true,
  77. "is-link": true,
  78. "center": true,
  79. "value": this.value,
  80. "label": this.label,
  81. "required": this.required,
  82. "placeholder": this.placeholder
  83. },
  84. "on": {
  85. "click": this.onClick
  86. }
  87. }, [h(_popup.default, {
  88. "attrs": {
  89. "round": true,
  90. "position": "bottom",
  91. "getContainer": "body"
  92. },
  93. "slot": "extra",
  94. "model": {
  95. value: _this.showDatePicker,
  96. callback: function callback($$v) {
  97. _this.showDatePicker = $$v;
  98. }
  99. }
  100. }, [h(_datetimePicker.default, {
  101. "attrs": {
  102. "type": this.type,
  103. "title": this.title,
  104. "value": this.currentDate,
  105. "minDate": this.minDate,
  106. "formatter": this.formatter
  107. },
  108. "on": {
  109. "cancel": this.onCancel,
  110. "confirm": this.onConfirm
  111. }
  112. })])]);
  113. }
  114. });
  115. exports.default = _default;