How to set default value for Input fields of datetime-local type created dynamically using Vuejs/Nuxtjs?

Question

I am creating a few input fields of type datetime-local in Vuejs/Nuxtjs dynamically. I would like to set the default value for all these input fields as 2022-04-21T14:27:27.000. How to do it?

For the direct field, we can assign the value using the v-model but I am a bit unsure about how to set a default value for all the fields of datetime-local. If I am not wrong there is an option in Vanilla JavaScript to get all fields of a certain type and change the value, is there a way to achieve the same using Vuejs/Nuxtjs.

Following is the code I have so far:

<template>
  <div>
    <button type="button" @click="addField" class="btn btn-info">
      Add Field
    </button>

    <div v-for="field in fieldArray" :key="field.ID" class="form-group">
      <input
        v-model="field.time"
        type="datetime-local"
        class="form-control"
        step="1"
        value="2022-04-21T14:27:27.000"
        @change="timeChange(field.ID)"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fieldCount: 0,
      fieldArray: [],
    };
  },
  mounted() {
    let now = new Date();
    now.setMinutes(now.getMinutes() - now.getTimezoneOffset());
    now.setSeconds(now.getSeconds(), 0);
    now = now.toISOString().slice(0, -1);
    //I would like to set this "now" time value for all the created fields of input type datetime-local
    console.log("Current Time : " + now);
  },
  methods: {
    //Add field
    addField() {
      const fieldObj = { ID: this.fieldCount, time: "" };
      this.fieldArray.push(fieldObj);
    },
    //Time change
    timeChange(ID) {
      console.log("ID : " + ID);
      console.log(JSON.stringify(this.fieldArray, null, 4));
    },
  },
};
</script>

<style>
</style>

All I would like to do is set the default time for all the datetime-local fields within my component. Is there any way to do it? I am able to achieve this for single field but not for the fields which is created dynamically.

score 1 · Answer 1 · answered Apr 21 '22 at 13:34

Something like this?

<template>
  <div>
    <button type="button" @click="addField" class="btn btn-info">
      Add Field
    </button>

    <div v-for="field in fieldArray" :key="field.ID" class="form-group">
      <input
        v-model="field.time"
        type="datetime-local"
        class="form-control"
        step="1"
        value="2022-04-21T14:27:27.000"
        @change="timeChange(field.ID)"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fieldCount: 0,
      fieldArray: [],
      now: null,
    };
  },
  mounted() {
    this.now = new Date();
    this.now.setMinutes(this.now.getMinutes() - this.now.getTimezoneOffset());
    this.now.setSeconds(this.now.getSeconds(), 0);
    this.now = this.now.toISOString().slice(0, -1);
    //I would like to set this "now" time value for all the created fields of input type datetime-local
    console.log("Current Time : " + this.now);
  },
  methods: {
    //Add field
    addField() {
      const fieldObj = { ID: this.fieldCount, time: this.now };
      this.fieldArray.push(fieldObj);
    },
    //Time change
    timeChange(ID) {
      console.log("ID : " + ID);
      console.log(JSON.stringify(this.fieldArray, null, 4));
    },
  },
};
</script>

<style>
</style>

score 0 · Answer 2 · answered Apr 21 '22 at 13:45

Dates are always hard.

The HTML input element with type datetime-local is odd. While it accepts a JavsScript date as input, it outputs a string... I would create a proxy component to handle this.

Take a look at this playground

// DateInput.vue
<template>
  <input :value="modelValue"
         @input="$emit('update:modelValue', new Date($event.target.value))"
         type="datetime-local" />
</template>
<script>
export default {
  props: ["modelValue"],
  emits: ["update:modelValue"],
}
</script>

// Parent.vue
<template>
  <div>
    <button type="button" @click="addField" class="btn btn-info">
      Add Field
    </button>
    <div v-for="field in fieldArray" :key="field.ID" class="form-group">
      {{field.ID}}
      <DateInput v-model="field.time"></DateInput> {{field.time}}
    </div>
    <hr />
    {{fieldCount}}
  </div>
</template>

<script>
import DateInput from './DateInput.vue'
export default {
  components: { DateInput },
  data() {
    return {
      fieldArray: [],
    };
  },
  computed: {
    fieldCount () {
      return this.fieldArray.length
    }
  },
  methods: {
    addField() {
      this.fieldArray.push({ ID: this.fieldCount, time: new Date() });
    },
  },
};
</script>

How to set default value for Input fields of datetime-local type created dynamically using Vuejs/Nuxtjs?

2 Answers2