0

estoy intentando asignar a un input tipo datetime-local fechas que me devuelve el servidor pero no asigna, he intentado con :value, v-bind y v-model, tambien formateando la fecha con moment.js pero sigo sin conseguir nada.

este es mi codigo:

cronograma.vue

template

<div class="table-responsive">
        <table class="table align-items-center table-flush">
            <thead class="thead-light">
                <tr>
                    <th>#</th>
                    <th scope="col">Etapa</th>
                    <th scope="col">Fecha Hora Inicio</th>
                    <th scope="col">Fecha Hora Fin</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(actividad, index) in actividades" :key="actividad.idConvocatoriaCronograma">
                    <td>{{ index+1 }}</td>
                    <td class="text-left">{{ actividad.etapa.nombre }}</td>
                    <td>
                        <div class="form-group mb--2">
                            <div class="input-group">
                                <input class="form-control" placeholder="Seleccione fecha" type="datetime-local" :value="formatearFecha(actividad.fechai)"  required>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="form-group mb--2">
                            <div class="input-group">
                                <input class="form-control" placeholder="Select date" type="datetime-local" :value="formatearFecha(actividad.fechaf)"  required>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

script

export default {
props: [ 'idconvocatoria' ],
created() {
    this.getCronograma();
},
data: function () {
    return {
        actividades: [],
    }
},
methods: {
    getCronograma: function () {
        let url = '/intranet/convocatorias/getetapas/'+this.idconvocatoria;
        axios.get(url).then(response => {
            this.actividades = response.data;
        }).catch(error => {
            toastr.error('no se pudo traer el cronograma');
        });
    },
    formatearFecha: function (date) {
        return moment(date).format();
    }
}

}

resultado: introducir la descripción de la imagen aquí

1 respuesta 1

0

De acuerdo al ejemplo que ofreces 2019-02-15 07:00:00 el formato no será reconocido.

Debe ser una fecha completa valida de acuerdo a la especificación rfc3339. En resumen debe cumplir estas condiciones en este mismo orden:

  1. una fecha
  2. la letra "T"
  3. una hora

Por ejemplo:

1985-04-12T23:20:50.52
1996-12-19T16:39:57

Ejemplo de un input tipo datetime-local:

<label for="party">Enter a date and time for your party booking:</label>
<input id="party" type="datetime-local" name="partydate" value="2017-06-01T08:30">
2
  • pero el formatearFecha() mediante moment.js hace esa conversion, retorna y resien es asignado (en teoria). formatearFecha('2019-02-15 07:00:00'){ return '2019-02-15T07:00:00'} el 22 feb. 2019 a las 5:44
  • 1
    Si formateas moment("2019-02-15 07:00:00").format() obtienes "2019-02-15T07:00:00-05:00" el cual sigue siendo un formato incorrecto para ese input el 22 feb. 2019 a las 16:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.