[Bug] disabled-date and time according to customized timezone.

[junaidshad]

Vue2-datepicker version: 3.11.0 Vue version: 2.7.6 Browser: Chrome

Steps to reproduce We allow users to change the timezone from within the application and show them the disabled date and time.

disabledDate(date) { return ( moment(date).tz(this.timezone) < new Date(moment().tz(this.timezone).subtract(1, "d")) ); }, disabledTime(date) { return ( moment(date).tz(this.timezone) < moment().tz(this.timezone).add(10, "m") ); },

Our Default Browser timezone is Pakistan timezone and we want to select the date and time according to the Los Angeles time zone, Also we want to show the disabled date and time according to the los angeles timezone but it is not working as intended.

Reproduction Link or Source Code

Expected behavior Suppose the time in Los Angeles is 01:00 AM and i want to disabled the time before 01:00 AM disabledTime(date) { return ( moment(date).tz(this.timezone) < moment().tz(this.timezone).add(10, "m") ); },

it should disable the time before 01:00AM Los Angeles time.

Actual behavior But it is disabling all the AM time and only working on PM time.

Kindly let me know if i'm doing anything wrong in the code.

[seeratawan01]

I'm also experiencing similar issue with timezone

[mengxiong10]

This component does not display the time zone. You can use this time as Los Angeles time and use other state to represent the real time.

<date-picker v-model="date" />

export defualt {
  data() {
    return {
      // Los Angeles time
      date: new Date(),
    }
  },
  computed: {
    // the real time
    value: {
      get() {
        const date = new Date(this.date)
        const timezone = 720 // timezone
        return new Date(date.getTime() + timezone * 60 * 1000)
      },
    },
  },
  methods: {
    disabledTime(date) {
      return date.getHours() < 1
    },
  },
}

[seeratawan01]

hey @junaidshad, I tried this and it's working fine for my usecase.

methods: {
 /**
     * Range calculator for disabled dates.
     * @param date
     * @returns {boolean}
     */
    disabledDate(date, currentValue) {
      // Converting current time to given timezone.
      const timeStart = new Date(
        new Date().toLocaleString('en-US', {
          timeZone: this.timezone, // America/New_York
        })
      )
      const timeEnd = new Date(date)

      // Removing 1 day from current time.
      const now = timeStart.setHours(
        timeStart.getHours() - 24,
        timeStart.getMinutes(),
        timeStart.getSeconds()
      )
      const value = timeEnd.getTime()

     // comparing milliseconds
      return value < now
    },

    /**
     * Range calculator for disabled time.
     * @param date
     * @returns {boolean}
     */
    disabledTime(date) {
      // Converting current time to given timezone.
      const timeStart = new Date(
        new Date().toLocaleString('en-US', {
          timeZone: this.timezone // America/New_York
        })
      )
      const timeEnd = new Date(date)

      // Adding 10 minutes into the current time.
      const now = timeStart.setHours(
        timeStart.getHours(),
        timeStart.getMinutes() + 10,
        timeStart.getSeconds()
      )
      const value = timeEnd.getTime()

      // comparing milliseconds
      return value < now
    },
}

[junaidshad]

This is exactly what i was looking for. Thank You @seeratawan01!