Настройка плоской даты и времени выбора в vuejs?

#javascript #vue.js

Вопрос:

Я работаю над flat-pickr. А теперь перейдем к части конфигурации. У меня есть два поля: start date и end date . Я хочу, чтобы при выборе времени по start date умолчанию оно равнялось 12 часам утра. И выберите время в end date , по умолчанию оно равно 12 часам вечера

введите описание изображения здесь

 // start date
<flat-pickr
     id="campaign-startdate"
     v-model="model.startdate"
     class="form-control"
     :config="formatStartDate"
/>
// end date
<flat-pickr
     id="campaign-enddate"
     v-model="model.endDate"
     class="form-control"
     :config="formatEndDate"
/>

data() {
  return: {
    model:{
      startDate: null,
      endDate: null,
    },
    formatStartDate: {
        enableTime: true,
        dateFormat: 'd-m-Y H:i'
    },
    formatEndDate: {
      enableTime: true,
      dateFormat: 'd-m-Y H:i'
    }
  }
}
 

Ответ №1:

Вы можете установить в конфигурации время по умолчанию, часы и минуты для каждого средства выбора.

  configStartDate: {
    altFormat: "F j, Y",
    altInput: true,
    enableTime: true,
    defaultHour:0,
    
  },
  configEndDate:{
   altFormat: "F j, Y",
    altInput: true,
    enableTime: true,
    defaultHour:12,
    
  }
 

Установите defaultHour:0 для начальной даты и установите defaultHour:12 для конечной даты

См. Ссылку для демонстрации flatpickr