Estoy creando dinámicamente algunos campos de entrada de tipo datetime-local en Vuejs/Nuxtjs . Me gustaría establecer el valor predeterminado para todos estos campos de entrada como 2022-04-21T14:27:27.000 . ¿Cómo hacerlo?
Para el campo directo, podemos asignar el valor usando el v-model pero no estoy seguro de cómo establecer un valor predeterminado para todos los campos de datetime-local . Si no me equivoco, hay una opción en Vanilla JavaScript para obtener todos los campos de un determinado tipo y cambiar el valor, ¿hay alguna manera de lograr lo mismo usando Vuejs/Nuxtjs ?
El siguiente es el código que tengo hasta ahora:
<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> Todo lo que me gustaría hacer es establecer la hora predeterminada para todos los campos datetime-local dentro de mi componente. ¿Hay alguna forma de hacerlo? Puedo lograr esto para un solo campo pero no para los campos que se crean dinámicamente.
¿Algo como esto?
<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>Las fechas siempre son difíciles.
El elemento de entrada HTML con tipo datetime-local es impar. Si bien acepta una fecha de JavsScript como entrada, genera una cadena... Crearía un componente de proxy para manejar esto.
Echa un vistazo a este parque infantil
// 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>