Question 258858 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to set placeholder as value to a date-picker

I am using Vue3 with options API

Given the code posted in StackBlitz here, the default date that initially set is dd.mm.yyyy. I would like to know how to set the date to that default format. In other words, when the user does specific action, I want to display dd.mm.yyyy.
For the sake of testing, I tried the following:

methods: {
    onDatePickerTimeSeriesAgoToChanged(evt) {
        const msg = JSON.stringify({ msg: verboseTag + 'onDatePickerTimeSeriesAgoToChanged():', evt });
        console.log(msg);
        this.compPropsVModelDatePickerTimeSeriesAgoTo = evt
        this.compPropsVModelDatePickerTimeSeriesAgoTo = undefined//<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
    },
},

but that did not achieve what I am looking for. How to set the date to dd.mm.yyyy?

Note:

the question is not about formatting the date. also,
the format of the placeholder does not matter whether it is dd.mm.yyyy or any other thing. the point is how can i display that placeholder? i want to display the placeholder when specific action occurs. is that ever possible please?

in other words, on occurance of a specific condition, i want to change the date-picker from, for example, 01-12-2021 to dd.mm.yyyy

Tags:

2

Answers


  1. 0

    Vue cobtains a so called v-model. It allows for two-way binding. If you edit the input the value changes. If you change the value, the displayed form changes.
    Take a look a at the vue-playground:

    <script setup>
import { ref } from 'vue'
import CustomInput from './CustomInput.vue'
  
const message = ref('hello')
</script>

<template>
  <CustomInput v-model="message" /> {{ message }}
</template>

    On load we set a value but when you input anything it also triggers a change. So you could define an event that changes the value and thus the Input.

    Alternatively use vue-datepicker, which has a cleared-event you could emit when needed.

    Login or Signup to reply.
  2. 0

    You should use v-model here. Refer below, have made the fix.

    https://stackblitz.com/edit/vue-v7xkzh?file=src%2Fcomponents%2FHelloWorld.vue,src%2FApp.vue

    In your template,

    <input
      id="idDatePickerTimeSeriesAgoTo"
      type="date"
      :max="maxDateToSelect"
      v-model="compPropsVModelDatePickerTimeSeriesAgoTo"
      @input="
        $emit(
          'update:compPropsVModelDatePickerTimeSeriesAgoTo',
          $event.target.value
        )
      "
      :disabled="isDatePickerTimeSeriesAgoToDisabled"
      @change="onDatePickerTimeSeriesAgoToChanged($event.target.value)"
    />

    In your scripts,

    data() {
    return {
      maxDateToSelect: new Date().toISOString().split('T')[0],
      compPropsVModelDatePickerTimeSeriesAgoTo: '',
    };
  },
methods: {
    onDatePickerTimeSeriesAgoToChanged(evt) {
      const msg = JSON.stringify({
        msg: verboseTag + 'onDatePickerTimeSeriesAgoToChanged():',
        evt,
      });
      console.log(msg);
      this.compPropsVModelDatePickerTimeSeriesAgoTo = evt;
      setTimeout(() => {
        this.compPropsVModelDatePickerTimeSeriesAgoTo = '';
      }, 3000);
    },
  },

    I added the code to let user change the date, show the selected date for 3 seconds, and then reset back to dd/mm/yyyy.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search