1

Tengo 2 imput de tipo datetimepickerdate_start & date end y datepicker date_reincorporation, cuando eligo la misma fecha en el 1ro necesito que el segundo guarde la fecha actual puesto que si un usuario se toma una licencia un mismo dia el dia de reincorporacion es el mismo. Gracias

<el-form-item label="Reintegro:" prop="date_reincorporation" v-if="ifSameDay === false">
                  <el-date-picker v-model="form.date_reincorporation"
                                  type="date"
                                  v-mask="'##-##-####'"
                                  format="dd-MM-yyyy"
                                  value-format="yyyy-MM-dd HH:mm"
                                  :picker-options="pickerOptions"
                                  placeholder="Fecha de reincorporación">
                  </el-date-picker>
                </el-form-item>
ifSameDay() {
    const date_start = moment(this.form.dates[0]).format('DD/MM/YYYY');
    const date_end = moment(this.form.dates[1]).format('DD/MM/YYYY');
    return (date_start === date_end && date_start !== 'Invalid date') ? true : false;
  },
3
  • Creo que lo que quieres decir es que si las primeras dos fechas son iguales, la reincorporación también sea igual a las dos primeras. ¿Tiene sentido? Yo diría que la fecha de reincorporación debiera ser el día siguiente a date_end
    – ffflabs
    Commented el 31 jul. 2018 a las 14:03
  • no por que una licencia puede ser en mi caso de 4,5,6 hs de una jornada laboral de 8, el tema es que cuando la fecha es igual el datepicker se desabilita y aunque no lo desabilite igual no se guarda la fecha.
    – Jeypi
    Commented el 31 jul. 2018 a las 14:11
  • Te dejé una respuesta. El hecho que no se guarde la fecha de reincorporación se debe a que no estás definiendo la fecha de reincorporación en ifSameDay. Luego, sacas el input pero la propiedad nunca la fijaste. Me gusta más la idea de tratar ifSameDay como un método que se ejecuta cuando cambian los dos primeros input.
    – ffflabs
    Commented el 31 jul. 2018 a las 14:14

1 respuesta 1

0

Me imagino que estás usando el datepicker de element-ui

Lo que yo haría es:

  • Definir las propiedades date_start y date_end como computed
  • Al cambiar sus valores, en el setter ejecutar ifSameDay como método, no como propiedad computed.
  • En el setter de date_start y date_end fijas el valor de this.form.dates[0] y this.form.dates[1], puesto que definir propiedades anidadas como computed es un problema. El getter de esas dos propiedades, a su vez, devuelve los valores de this.form.dates.
  • Al ejecutar ifSameDay, si se cumple la condición, fijar this.form.date_reincorporation a la fecha que quieres, y fijar una propiedad this.reincorporation_readonly como true para bloquear el input.
  • Si no se cumple la condición, limpiar this.form.date_reincorporation y definir this.reincorporation_readonly como false.

El input de la fecha de reincorporación quedaría:

Y te ahorras envolver el parent en un v-if.

Si tu componente hoy tiene la estructura (voy a simplificar mucho)

{
  name: 'Licencias',
  data() {
    return {
      form: {
        dates: [new Date(), new Date()],
        date_reincorporation: new Date()
      }
    }
  },
  methods: {
    ifSameDay() {
      const date_start = moment(this.form.dates[0]).format('DD/MM/YYYY');
      const date_end = moment(this.form.dates[1]).format('DD/MM/YYYY');
      return (date_start === date_end && date_start !== 'Invalid date') ? true : false;
    },
  }
};

Con mi sugerencia quedaría:

{
  name: 'Licencias',
  data() {
    return {
      reincorporation_readonly: false,
      form: {
        dates: [new Date(), new Date()],
        date_reincorporation: new Date()
      }
    }
  },
  computed: {
    date_start: {
      get() {
        return this.form.dates[0];
      },
      set(date_start) {
        this.form.dates[0] = date_start;
        this.ifSameDay();
      },
    },
    date_end: {
      get() {
        return this.form.dates[1];
      },
      set(date_start) {
        this.form.dates[1] = date_end;
        this.ifSameDay();
      },
    },
  },
  methods: {
    ifSameDay() {
      const date_start = moment(this.form.dates[0]).format('DD/MM/YYYY');
      const date_end = moment(this.form.dates[1]).format('DD/MM/YYYY');
      if (date_start === date_end && date_start !== 'Invalid date') {
        this.form.date_reincorporation = date_end;
        this.reincorporation_readonly = true;
      }
    },
  }
};

En otras palabras, el v-model de la fecha inicio y fecha fin apunta a date_start y date_end, las cuales modifican indirectamente this.form.dates. La gracia es que al ponerle getters y setters puedes gatillar el efecto colateral de comprobar ifSameDay en el cual fijas la fecha de reincorporación y dejas el input como readonly. En este caso, no hay un v-if en el el-form-item.

Este es sólo un posible enfoque. También podrías añadir un watcher a las propiedades, pero eso me parece más sucio.

Finalmente, también podrías forzar la fecha de reincorporación al hacer submit sin tocar el resto de tu código, pero tendrías que hacer dos comprobaciones:

submitForm() {

    this.form.date_reincorporation = this.ifSameDay? this.form.date[1] : this.form.date_reincorporation;

    this.form.date_reincorporation = this.form.date_reincorporation?  moment(this.form.date_reincorporation).format('YYYY-MM-DD HH:mm') : null; 

}
4
  • entiendo la solucion pero no se como aplicarlo, hace poco estoy con este sistema, por eso decia de como puedo devolver en ifSameDay la fecha de reintegro, sí uso element-ui
    – Jeypi
    Commented el 31 jul. 2018 a las 14:24
  • si mal no entiendo igual en el submit está guardando date_reincorporation como nulo cuando ifSameDay = true? this.form.date_reincorporation = (this.form.date_reincorporation && !this.ifSameDay) ? moment(this.form.date_reincorporation).format('YYYY-MM-DD HH:mm') : null;
    – Jeypi
    Commented el 31 jul. 2018 a las 14:54
  • Según ese comentario, efectivamente estás guardando como nulo el valor, y entiendo que no es lo que quieres hacer
    – ffflabs
    Commented el 31 jul. 2018 a las 16:09
  • Te dejé un ejemplo muy simplificado de cómo quedaría tu componente. A ver si te sirve
    – ffflabs
    Commented el 31 jul. 2018 a las 17:47

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.