129 lines
		
	
	
		
			2.9 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			129 lines
		
	
	
		
			2.9 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
| "use strict";
 | |
| 
 | |
| var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 | |
| 
 | |
| exports.__esModule = true;
 | |
| exports.default = void 0;
 | |
| 
 | |
| var _utils = require("../../utils");
 | |
| 
 | |
| var _timeHelper = require("../utils/time-helper");
 | |
| 
 | |
| var _popup = _interopRequireDefault(require("../../popup"));
 | |
| 
 | |
| var _datetimePicker = _interopRequireDefault(require("../../datetime-picker"));
 | |
| 
 | |
| var _field = _interopRequireDefault(require("../../field"));
 | |
| 
 | |
| // Utils
 | |
| // Components
 | |
| var namespace = (0, _utils.createNamespace)('sku-datetime-field');
 | |
| var createComponent = namespace[0];
 | |
| var t = namespace[2];
 | |
| 
 | |
| var _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 = (0, _timeHelper.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 = (0, _timeHelper.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.default, {
 | |
|       "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.default, {
 | |
|       "attrs": {
 | |
|         "round": true,
 | |
|         "position": "bottom",
 | |
|         "getContainer": "body"
 | |
|       },
 | |
|       "slot": "extra",
 | |
|       "model": {
 | |
|         value: _this.showDatePicker,
 | |
|         callback: function callback($$v) {
 | |
|           _this.showDatePicker = $$v;
 | |
|         }
 | |
|       }
 | |
|     }, [h(_datetimePicker.default, {
 | |
|       "attrs": {
 | |
|         "type": this.type,
 | |
|         "title": this.title,
 | |
|         "value": this.currentDate,
 | |
|         "minDate": this.minDate,
 | |
|         "formatter": this.formatter
 | |
|       },
 | |
|       "on": {
 | |
|         "cancel": this.onCancel,
 | |
|         "confirm": this.onConfirm
 | |
|       }
 | |
|     })])]);
 | |
|   }
 | |
| });
 | |
| 
 | |
| exports.default = _default; | 
