src/form/DateTimeField.js

   1 Ext.define('Proxmox.DateTimeField', {
   2     extend: 'Ext.form.FieldContainer',
   3     // FIXME: remove once all use sites upgraded (with versioned depends on new WTK!)
   4     alias: ['widget.promxoxDateTimeField'],
   5     xtype: 'proxmoxDateTimeField',
   6
   7     layout: 'hbox',
   8
   9     viewModel: {
  10         data: {
  11             datetime: null,
  12             minDatetime: null,
  13             maxDatetime: null,
  14         },
  15
  16         formulas: {
  17             date: {
  18                 get: function(get) {
  19                     return get('datetime');
  20                 },
  21                 set: function(date) {
  22                     if (!date) {
  23                         this.set('datetime', null);
  24                         return;
  25                     }
  26                     let datetime = new Date(this.get('datetime'));
  27                     datetime.setFullYear(date.getFullYear(), date.getMonth(), date.getDate());
  28                     this.set('datetime', datetime);
  29                 },
  30             },
  31
  32             time: {
  33                 get: function(get) {
  34                     return get('datetime');
  35                 },
  36                 set: function(time) {
  37                     if (!time) {
  38                         this.set('datetime', null);
  39                         return;
  40                     }
  41                     let datetime = new Date(this.get('datetime'));
  42                     datetime.setHours(time.getHours());
  43                     datetime.setMinutes(time.getMinutes());
  44                     datetime.setSeconds(time.getSeconds());
  45                     datetime.setMilliseconds(time.getMilliseconds());
  46                     this.set('datetime', datetime);
  47                 },
  48             },
  49
  50             minDate: {
  51                 get: function(get) {
  52                     let datetime = get('minDatetime');
  53                     return datetime ? new Date(datetime) : null;
  54                 },
  55             },
  56
  57             maxDate: {
  58                 get: function(get) {
  59                     let datetime = get('maxDatetime');
  60                     return datetime ? new Date(datetime) : null;
  61                 },
  62             },
  63
  64             minTime: {
  65                 get: function(get) {
  66                     let current = get('datetime');
  67                     let min = get('minDatetime');
  68                     if (min && current && !this.isSameDay(current, min)) {
  69                         return new Date(min).setHours('00', '00', '00', '000');
  70                     }
  71                     return min;
  72                 },
  73             },
  74
  75             maxTime: {
  76                 get: function(get) {
  77                     let current = get('datetime');
  78                     let max = get('maxDatetime');
  79                     if (max && current && !this.isSameDay(current, max)) {
  80                         return new Date(max).setHours('23', '59', '59', '999');
  81                     }
  82                     return max;
  83                 },
  84             },
  85         },
  86
  87         // Helper function to check if dates are the same day of the year
  88         isSameDay: function(date1, date2) {
  89             return date1.getDate() === date2.getDate() &&
  90                 date1.getMonth() === date2.getMonth() &&
  91                 date1.getFullYear() === date2.getFullYear();
  92         },
  93     },
  94
  95     config: {
  96         value: null,
  97         submitFormat: 'U',
  98         disabled: false,
  99     },
 100
 101     setValue: function(value) {
 102         this.getViewModel().set('datetime', value);
 103     },
 104
 105     getValue: function() {
 106         return this.getViewModel().get('datetime');
 107     },
 108
 109     getSubmitValue: function() {
 110         let me = this;
 111         let value = me.getValue();
 112         return value ? Ext.Date.format(value, me.submitFormat) : null;
 113     },
 114
 115     setMinValue: function(value) {
 116         this.getViewModel().set('minDatetime', value);
 117     },
 118
 119     getMinValue: function() {
 120         return this.getViewModel().get('minDatetime');
 121     },
 122
 123     setMaxValue: function(value) {
 124         this.getViewModel().set('maxDatetime', value);
 125     },
 126
 127     getMaxValue: function() {
 128         return this.getViewModel().get('maxDatetime');
 129     },
 130
 131     initComponent: function() {
 132         let me = this;
 133         me.callParent();
 134
 135         let vm = me.getViewModel();
 136         vm.set('datetime', me.config.value);
 137         // Propagate state change to binding
 138         vm.bind('{datetime}', function(value) {
 139             me.publishState('value', value);
 140             me.fireEvent('change', value);
 141         });
 142     },
 143
 144     items: [
 145         {
 146             xtype: 'datefield',
 147             editable: false,
 148             flex: 1,
 149             format: 'Y-m-d',
 150             bind: {
 151                 value: '{date}',
 152                 minValue: '{minDate}',
 153                 maxValue: '{maxDate}',
 154             },
 155         },
 156         {
 157             xtype: 'timefield',
 158             format: 'H:i',
 159             width: 80,
 160             value: '00:00',
 161             increment: 60,
 162             bind: {
 163                 value: '{time}',
 164                 minValue: '{minTime}',
 165                 maxValue: '{maxTime}',
 166             },
 167         },
 168     ],
 169 });