Handling date picker properties in Vue JS

[RiqueBR]

Describe the bug
Thank you very much for all your hard work, this date picker is incredibly neat!

I've been trying to implement this date picker into a Vue JS project. I'm a bit new and as I understand from your documentation, in order to use the properties of duet date picker (e.g. Localization, dateAdapter, direction, etc.) I need to override their defaults. I've been trying to add them as props to my component but so far no luck. Is this a bug or just a gap on my own understanding?

To Reproduce
Steps to reproduce the behavior:

1. Create a Vue component that uses duet date picker
2. Pass localization object as a prop

Expected behavior
I expect the placeholder to change it's label from "YYYY-MM-DD" to "DD/MM/YYYY"

Desktop (please complete the following information):

• OS: Catalina 10.5.15
• Browser: [Chrome, FF, IE11, Safari]
• Version: Duet date-picker version 1.0.1

Additional context
Component in case:

  <duet-date-picker 
    ref="date-picker"
    identifier="date"
    direction="left"
    :value="enteredDate"
    v-bind:class="{'has-error': hasErrors}"
    v-bind:required="isRequired"
    :name="name"
    :localization="{placeholder: 'DD/MM/YYYY'}"
    :dateAdapter="format_date()"
    @duetChange="dateChanged"
  />

[WickyNilliams]

Hey, would you be able to create a codepen/jsfiddle/whatever which demonstrates your issue? I'm unfamiliar with Vue, so would take me a long time to recreate (and even then, it might not match your setup!). Would make it a lot easier to help out :)

[RiqueBR]

Hi, absolutely. Here's a link for a quick repro.
https://github.com/RiqueBR/datepicker-test

Thanks for taking the time!

[arielsalminen]

@WickyNilliams @RiqueBR The first issue I see here is that you can’t change just one value inside the localization object. You need to pass in the whole object for things to work. Please see the last example on this page: https://duetds.github.io/date-picker/

[RiqueBR]

That's brilliant! How about the dateAdapter? I've been trying to pass as a prop as well an object with those functions and it's not picking up. I've updated the repo.

<template>
  <div id="app">
    <h1>UoE Datepicker - duet date picker</h1>
    <duet-date-picker
      :dateAdapter="format_date()"
      :localization="localization_uk"/>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      localization_uk: {
        //... lots more to add here
        placeholder: 'DD/MM/YYYY'
      }
    }
  },
  methods: {
    format_date: function() {
      const DATE_REGEX = /^20[0-9]{2}-[0,1][0-9]-[0-3][0-9]$/;
      return {
        parse(value = '', createDate) {
          const validated = value.match(DATE_REGEX);
          if (validated) {
            return createDate(validated[3], validated[2], validated[1]);
          }
        },
        format(date) {
          return `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`;
        }
      };
    }
  }
}
</script>

[RiqueBR]

By the way, I can submit a wee PR that would cover what we're chatting in here to the docs if that's alright. :)

[WickyNilliams]

I think you need to explicitly tell vue to pass the objects as a property, not an attribute. Since it can't determine which to use, it defaults to attribute. If you look in dev tools you will see dateAdapter="[Object object]".

I just tested and this should work:

<duet-date-picker :dateAdapter.prop="format_date()" />
                               ^^^^

This answer on stackoverflow pointed me in the right direction: https://stackoverflow.com/questions/61385404/vuejs-cant-pass-object-to-web-component-using-v-bind

I removed the localization part since it was incomplete and causing errors, but the same is true there once you complete the object. Hope that helps :)

[WickyNilliams]

and yes PRs welcome!

[RiqueBR]

Hey @viljamis @WickyNilliams, thank you so much for this! I'll send a wee update of the docs to reflect this at some point this week.

[RiqueBR]

I've just submitted a PR for what we talked here and will close this issue now. Thanks for the prompt response, appreciate it!