SkuDateTimeField.js 2.6 KB

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