In my VueJS application I have a component with a form.
In that form I have a field to pick the date.
My requirement is to show an error message if the selected date is older than the current date.
Basically the selected date need to be either today's date or future date.
I'm using Moment JS.
I have following custom rule in my Validator.vue
const dateIsToday = (value) => {
var todayDate = moment(new Date()).format("DD-MM-YYYY");
var selectedDate = value;
return selectedDate>=todayDate;
};
But this works only if I selected an old date from the current month... Assume if the user has picked an older date from this month like 10-04-2022, then it'll show the error message.
But if the user selected an old date from last month or a past month like 10-01-2022, this won't show me the error message....
In my form.vue I have
<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>
And under my validations I have,
startDate: {
required: {
message: 'Project Start date is required.'
},
dateIsToday: {
message: 'Date has to be today's date or a future date.'
},
},
It seems that you are comparing strings. Instead you should make real use of moment and compare moment dates:
const dateIsToday = (value) => {
let todayDate = moment();
let selectedDate = moment(value, "DD-MM-YYYY");
return selectedDate.isSameOrAfter(todayDate);
};