Control the timezone

[pimvanderheijden]

I trying to find a way to control the timezone in the a dual date range calendar. As far as I see it, there is no obvious way to do this.

Any suggestions?

[mengxiong10]

try the value-type prop.

[dukhevych]

@mengxiong10 It doesn't help

I use range date: ['2018-12-01', '2018-12-31'], show by months.
So I should have available ONLY December.
But it shows November - December.
How can this be fixed?

[pimvanderheijden]

@Landen13 Looks like you're talking about something else

[pimvanderheijden]

@mengxiong10 I assume you mean I need to add some code to convert it to the date object to the right timezone using moment-timezone or some other library

sure, no problem!

Love the module by the way

[mengxiong10]

@Landen13
If you want to use a string as the binding value, you can set the value-type to 'format' in lastest version.

[mengxiong10]

@MidNightP Yes.

{
  value2date: (value: any) => Date,  // transform the binding value to calendar Date Object
  date2value: (date: Date) => any   // transform the calendar Date Object to binding value
}

[pimvanderheijden]

Ah thanks, I didn't fully get that from the docs, my bad.

It reads: "Advanced: You can also customize objects to implement two functions."

Yet, I understand, these "customize objects" are necessary when using the "format" value-type.

This is merely a matter of documentation then

[pimvanderheijden]

Where in my Vue code should I use these function value2date and date2value?

I don't get how it works. Can you give us a working example?

[mengxiong10]

No. You don't need to customize objects when using the "format" value-type.
eg: select the UTC time replace Local time.

<date-picker v-model="value" lang="en" :value-type="valueType"></date-picker>

  data () {
    // transform v-model binding data to calendar Date.
    const value2date = (value) => {
      const date = new Date(value)
      return value ? new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000) : null
    }

    // transform calendar Date to v-model binding data.
    const date2value = (date) => {
      return date ? new Date(date.getTime() - date.getTimezoneOffset() * 60 * 1000) : null
    }
    return {
      valueType: {
        value2date,
        date2value
      },
      value: null
    }
  }

[pimvanderheijden]

I have did exactly that and removed all the other props from the date-picker

Yet, my value2date and date2value function are never called... :/

[mengxiong10]

which version do you use?
Can you show your code

[pimvanderheijden]

Datepicker(
					lang="language"
					v-model="startEnd"
					:value-type="valueType"
				)

data: function() {
		const language = moment.locale()

		return {
			language,
                        startEnd: null,
			valueType: {
				value2date: (value) => {
					// transform the binding value to calendar Date Object
					console.log("value2date", value)

					return moment(value).format("LL")
				},
				date2value: (date) => {
					// transform the calendar Date Object to binding value
					console.log("date2value", date)

					return moment(date).format("LL")
				}
			}
		}

[pimvanderheijden]

version is latest: 2.6.2

[pimvanderheijden]

okay, I now started using a get and set function on the v-model, that works well

but, I also want to be able to write a function that formats the outputted text using moment("LL")