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