Handling date picker properties in Vue JS about date-picker HOT 9 CLOSED

@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/

from date-picker.

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.

from date-picker.

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 :)

from date-picker.

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

Thanks for taking the time!

from date-picker.

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>

from date-picker.

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. :)

from date-picker.

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 :)

from date-picker.

and yes PRs welcome!

from date-picker.

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

from date-picker.