I have two date-picker fields. I am using them as start date and end date, but the problem is i can choose end date before the start date that means end date is less than start date.
I want to do some validation or anything, after selecting the start date, end date date picker should not select the date previous the date of start date.
i want same as below :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Select a Date Range</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var dateFormat = "mm/dd/yy",
from = $( "#from" )
.datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1
})
.on( "change", function() {
to.datepicker( "option", "minDate", getDate( this ) );
}),
to = $( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1
})
.on( "change", function() {
from.datepicker( "option", "maxDate", getDate( this ) );
});
function getDate( element ) {
var date;
try {
date = $.datepicker.parseDate( dateFormat, element.value );
} catch( error ) {
date = null;
}
return date;
}
} );
</script>
</head>
<body>
<label for="from">From</label>
<input type="text" id="from" name="A">
<label for="to">to</label>
<input type="text" id="to" name="B">
</body>
</html>
i did resolved it. Now user can not choose the start date greater than end date. I simply add a function in my functions.php file.
// Date Picker Validation --- Start Date should be less than End Date.
add_action('acf/validate_save_post', 'my_acf_validate_save_post', 10, 0);
function my_acf_validate_save_post()
{
$start = $_POST['acf']['key of datepicker 1'];
$start = new DateTime($start);
$end = $_POST['acf']['key of datepicker 2'];
$end = new DateTime($end);
// check custom $_POST data
if ($start > $end) {
acf_add_validation_error('name of datepicker field you want to display error message. ', 'End Date should be greater than or Equal to Start Date');
}
}
In this i have select two datepicker and then converted them to date format then compared them as you can see above.
* You can get key of ACF field from sreen option and then selecting field keys
* You can select the name of the field by inspecting in chrome and selecting the datepicker input field.
Nice – works fine.
But I have one problem when I use the validation in a custom plugin of mine.
Every Time I turn it on and off i received an error
Undefined index: field_xxx (start date)
Undefined index: field_yyy (end date)
How do I fix this?
@morten_hjemmesider
What version of ACF are you useing? There is difference between ACF 4 and 5. ACF 4 uses $_POST[‘fields’] instead of $_POST[‘acf’]
Other than that, double check your field keys.
The validation works fine 🙂
My problems appear because I have made a plugin settings page with ACF select boxes.
If the box isn’t checked then the required php file will not be loaded
In my plugin-name.php file I have
if( $hc_custom_options && in_array('Event', $hc_custom_options) ) {
require_once ('files/acf-event-fields.php');
};
The validation is on the files/acf-event-fields.php
Unchecking the select box fires the error
hope you understand my poor english … and my PHP skills 😉
The answer from @questioner is working.
Here is a picture of how to get the key of the date picker.
I implemented it on this website and it is working
https://mipon.org/events/
