I can't select the ongoing year

[DrJaxx]

Hello!

When clicking on the year, 2018 remain grey and unclickable. 2019 and above is fine but the actual year isn't selectable.

<DatePicker
      ref="datepicker"
      v-model="selectedDate"
      lang="fr"
      placeholder="Définir une date"
      type="datetime"
      :time-picker-options="timeOptions"
      :not-before="beforeDate"
      v-on:change="validate()"
      format="DD-MM-YYYY à HH:mm"
      :first-day-of-week="1">
      <template slot="footer">
        <!--<div class="footer-handler">-->
          <!--<Button type="success" class="footer-handler__button" :disabled="selectedDate <= beforeDate" @click.native="validate()" >Valider</Button>-->
        <!--</div>-->
      </template>
    </DatePicker>

data() {
    return {
      selectedDate: "",
      beforeDate: this.$moment().add(1, 'd').startOf('day').valueOf(),
      timeOptions: {
        start:'08:00',
        step:'00:15',
        end:'20:00'
      }
    }
  },

[mengxiong10]

v2.4.3 fixed it

[DrJaxx]

Thanks mate :)

[RobertMoravek]

I have a similar issue.

<DatePicker v-model="scheduledDate" type="datetime" :show-second="false" :disabled-time="disablePastTimes" />

disablePastTimes(time, date) { const now = new Date(); const in10Minutes = new Date(now.getTime() + 10 * 60000); const selectedDateTime = new Date(${date} ${time}`);

		return selectedDateTime <= in10Minutes;
	}`

This correctly eliminates all dates and times before 10 minutes into the future. But the first available minute to select cannot actually be selected. A minute later is easily selectable. This also occures when I just compare current time with chosen time (without the 10 minute buffer).

Could you either tell me, where I'm going wrong or fix this issue, as you did the one above?

Thanks!

[mengxiong10]

@RobertMoravek You can set the value to a valid date when you select date.

    <date-picker
      v-model="date"
      type="datetime"
      @pick="handleChange"
      :disabled-time="disabledTime"
    ></date-picker>

  methods: {
    handleChange(date, type) {
      if (type === "date") {
        const now = new Date();
        const value = new Date(date);
        value.setHours(now.getHours(), now.getMinutes() + 11, 0, 0);
        this.date = value;
      }
    },
    disabledTime(date) {
      const in10Minutes = new Date(Date.now() + 10 * 60000);
      return date < in10Minutes;
    },
  },

[RobertMoravek]

I am not sure whether we talk about the same issue. Here is a screenshot:

This was taken at 9:46 and as you can see it correctly only shows times as selectable that are 10 minutes or more into the future. But the first selectable time (9:56) cannot actually be clicked. Nothing happens. It's not a big deal, since most of my users won't click the earliest possible minute but it still might be confusing. So I would be grateful, if you could have another look.

Thanks!

[mengxiong10]

@RobertMoravek Maybe the second in your in10Minutes is not 0.

in10Minutes.setSeconds(0, 0)

[RobertMoravek]

UNfortunately I get the same issue. Even if I do the same thing with "now". I can select the first no disabaled time but the field showing the time just stays empty.