feat: listen to the updated date from the datepicker

src/components/AppDateInput.vue

@@ -21,6 +21,7 @@
  )
  date-picker(
  v-if="showPicker"
+ @date-changed="setLocaleDate"
  :dateValue="dateValue"
  :locale="locale"
  :locales="locales"
@@ -51,15 +52,19 @@ export default class AppDateInput extends Vue {
  @Prop() label?: string;
  @Prop() name!: string;
  showPicker: boolean = false;
- localeDate: string = this.dateValue.toLocaleDateString(this.locale, {
- month: "long",
- year: "numeric",
- day: "numeric"
- });
+ localeDate: string = "";
  localeMonths: string[] = generateMonthNameInLocale(
  this.locale || navigator.language
  );
 
+ setLocaleDate(date: Date) {
+ this.localeDate = date.toLocaleDateString(this.locale, {
+ month: "long",
+ year: "numeric",
+ day: "numeric"
+ });
+ }
+
  localeDateChanged() {
  const dateMap: string[] = this.localeDate.split(/[ ,-/\\،]/);
  if (dateMap.length > 0) {
@@ -86,5 +91,8 @@ export default class AppDateInput extends Vue {
  hide() {
  this.showPicker = false;
  }
+ mounted() {
+ this.setLocaleDate(this.dateValue);
+ }
 }
 </script>