V-Calendar Support

Support
1

I was testing out v-calendar as a more mobile-friendly date picker, but I’ve run into a couple of issues:

  1. The components doesn’t seem to populate a pre-filled date (I tried using dev tools to copy the string into the page data model and refreshing the page but the field is empty.

  2. The component stores the date as i18n for localization but this can lead to the date being wrong by a day by the time it reaches the server. For example if I select 2020/06/26 while my time is set to Australian Western Standard the model shows 2020-06-25T16:00:00.000Z, If I then decode it on a machine running in the UK the date gets interpreted as Thu Jun 25 2020 17:00:00 because the timezone is not encoded with the date. I can’t work out how to send the date in a way that will ensure it is not wrong.

Any solutions to these issues would be greatly appreciated

2

I can offer some feedback on point 2. What you’re seeing is perfectly correct :slight_smile:

The Z on the end of 2020-06-25T16:00:00.000Z indicates ‘Zulu’ time = UTC / GMT, Western Australia is (currently) GMT +8, which means that if you’re selecting the date at 0200 on the 26th of June (in WA) then that’s 1600 GMT on the 25th, which is 1700 BST that same afternoon.

What do you actually need? The date in the user’s local timezone? or the date in ‘server local’? Or?

3

Regarding your first point: I’ve noticed that with some of these external calendar widgets, they sometimes need an actual Date object instead of a string. To accomplish this, I make a named action called something like “update dates” and run it during onFormLoad or any other time that a date might be passed in from FileMaker. Within that named action, run a function action that uses a library like moment.js to parse the string into a date, then set that into a new key in your model. If you do this method, you’ll then also need to run another function before you save the data back fo FM that will translate the date object back into a string for FileMaker to properly parse.

4

Thanks for the feedback, I came to the same conclusion as @eluce except that I have two variables in the model, one which carries data to and from FileMaker and gets updated using a @input function, and one which is the actual date object used by the calendar which is generated on form load from any existing data. This also solves the problem of the incorrect dates as the conversion to a simple date string is done locally and hence under the same timezone as the original date object was generated. I thought I was making it more complicated than necessary but sounds like there isn’t an “easy” way to do it.

5

I was happy to see the new Model Config feature in V-Calendar 2: https://vcalendar.io/datepicker.html#model-config It’s taken the struggle out of formatting dates for use by the component. I can use this in an html element to directly modify a date in FileMaker’s default format, without having to convert to/from a JS date object:

<v-date-picker
  v-model="model.date"
  :model-config="{
    type: 'string',
    mask: 'M/D/YYYY'
  }"
>
  <template v-slot="{ inputValue, inputEvents }">
    <input
      class="form-control"
      :value="inputValue"
      v-on="inputEvents"
    />
  </template>
</v-date-picker>

Just make sure you adjust your DOM Header Insertion to specify version 2 of v-calendar, see this post for my advice on that: CDN Advice if your site is slow to load

1 Like