How can I make the datetime picker (or a date field in general) only accept dates from today onwards - Refusing all dates before today?
Thanks
Only accept future dates by datetime picker (v2023)
-
- User
- Posts: 153
- Location: UK
Only accept future dates by datetime picker (v2023)
-
- User
- Posts: 11922
You may search in this forum by using minDate
keyword.
Even though you can prevent to select date that previous than today via DateTimePicker, you still need validation from server side, since end-users are still be able to change the date by changing the value from the Textbox control.
-
- User
- Posts: 153
- Location: UK
Thanks, but I was intending to make the date text box read-only so they had to use the DatePicker.
However I'm still stuck on getting today's date. Following ideas in other posts I've tried...
{restrictions:{"minDate":"today"}}
Unable to parse provided input: today, format: dd/MM/y
{restrictions:{"minDate":Moment()}}
Uncaught ReferenceError: Moment is not defined
{restrictions:{"minDate":moment()}}
Uncaught ReferenceError: moment is not defined
{restrictions:{"minDate":[]}}
Uncaught Error: TD: Could not correctly parse "" to a date for restrictions.minDate.
Any thoughts?
-
- User
- Posts: 11922
Change this code:
{restrictions:{"minDate":"today"}}
to:
{restrictions: {"minDate": "<?php echo CurrentDate(); ?>"} }
I tried with v2024, and it works properly. It should work also for v2023.
In addition, make sure you have already adjusted the locale setting (Tools -> Locale Settings) for date directive as "yyyy-MM-dd"
.
-
- User
- Posts: 10
In my case, if having "yyyy-MM-dd" is working as expected in v2024, but I need to achieve the same result having the date directive like "dd/MM/yyyy". Then, can this be achieved somehow with this setting?
-
- User
- Posts: 159
mobhar wrote:
you still need validation from server side, since end-users are still be able to change the date by changing the value from the Textbox control.
For this, you can test this code, that works for me:
Jquery Code:
const currentDate = new Date().getTime();
$("IDDatetimepickerinput").change(function(){
const inputdate = new Date(document.getElementById('IDDatetimepickerinput').value.split('/').join('-').split(' ')[0]).getTime(); //My Datetime format its "yyyy/MM/dd" that why I need to use split and join for change this "-" to this "/"(change this code for your format)
if(inputdate > currentDate){
Swal.fire({
icon: 'error',
title: 'Oops...',
html: 'The date that you selected is a <strong class="text-danger">future date</strong>.',
footer: 'Try with another date'
})
$(".tempus-dominus-widget").removeClass("show"); //Hide the calendar
$("IDDatetimepickerinput").val(""); //Erase the text that you put on your input datetime
$(".active").removeClass("active"); //Remove the selected date active of the calendar
}
});