En mi aplicación VueJS tengo un componente con un formulario.
En ese formulario tengo un campo para elegir la fecha.
Mi requisito es mostrar un mensaje de error si la fecha seleccionada es anterior a la fecha actual.
Básicamente, la fecha seleccionada debe ser la fecha de hoy o la fecha futura.
Estoy usando Moment JS.
Tengo la siguiente regla personalizada en mi Validator.vue
const dateIsToday = (value) => { var todayDate = moment(new Date()).format("DD-MM-YYYY"); var selectedDate = value; return selectedDate>=todayDate; }; Pero esto solo funciona si seleccioné una fecha anterior del mes actual... Suponga que el usuario eligió una fecha anterior de este mes como 10-04-2022 , entonces mostrará el mensaje de error.
Pero si el usuario seleccionó una fecha anterior del mes pasado o un mes pasado como 10-01-2022 , esto no me mostrará el mensaje de error...
En mi form.vue tengo
<div class="w-1/2 mr-2"> <p class="text-certstyle-titles font-bold text-sm mb-1">Start date</p> <div class="h-12"> <cs-date-picker id="startDate" v-model="project.start_date" :default-selection="true" :name="`${identifier}-start_at`"> </cs-date-picker> <validator :identifier="`${identifier}-validate-project`" :rules="validations.startDate" :name="`${identifier}-start_at`" /> </div> </div>Y bajo mis validaciones tengo,
startDate: { required: { message: 'Project Start date is required.' }, dateIsToday: { message: 'Date has to be today's date or a future date.' }, },Parece que estás comparando cadenas. En su lugar, debe hacer un uso real del momento y comparar las fechas del momento:
const dateIsToday = (value) => { let todayDate = moment(); let selectedDate = moment(value, "DD-MM-YYYY"); return selectedDate.isSameOrAfter(todayDate); };