I am developing a VueJS application that includes a form component.
Within this form, there is a field for selecting dates.
My goal is to display an error message if the chosen date is older than today's date.
Essentially, the selected date should either be today's date or a future date.
To accomplish this, I am utilizing Moment JS in my project.
Here is the custom rule defined in my Validator.vue:
const dateIsToday = (value) => {
var todayDate = moment(new Date()).format("DD-MM-YYYY");
var selectedDate = value;
return selectedDate>=todayDate;
};
However, I have noticed that this validation only works if an old date within the current month is selected. For instance, choosing 10-04-2022 triggers the error message.
If a past date from last month or another previous month is selected, like 10-01-2022, the error message does not display.
In my form.vue file, the section relevant to date selection looks like this:
<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>
Under the validations section, I have specified the rules for the start date as follows:
startDate: {
required: {
message: 'Project Start date is required.'
},
dateIsToday: {
message: 'Date has to be today's date or a future date.'
},
},