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