I was implementing a date picker on one of my pages, and it was working fine. However, after moving my JavaScript files from the PHTML file to a separate JS file, it stopped working and is now picking the wrong format. Can you help me fix it?
Working file that present in the same phtml file
$('#imported_from_dated').datepicker({
format: '<?php echo DATE_PICKER_FORMAT; ?>', // format 'yyyy-mm-dd'
}).on('changeDate', function (e) {
$('#searchDataForm').formValidation('revalidateField', 'imported_from_dated');
if ($('#imported_to_dated').val() != '') {
$('#searchDataForm').formValidation('revalidateField', 'imported_to_dated');
}
$('#imported_from_dated').show();
});
$('#imported_to_dated').datepicker({
format: '<?php echo DATE_PICKER_FORMAT; ?>', // format 'yyyy-mm-dd'
}).on('changeDate', function (e) {
$('#searchDataForm').formValidation('revalidateField', 'imported_from_dated');
$('#searchDataForm').formValidation('revalidateField', 'imported_to_dated');
$('#imported_to_dated').show();
});
$('#searchDataForm').formValidation({
message: 'list message',
fields: {
imported_from_dated: {
validators: {
notEmpty: {
message: 'error message 1',
},
date: {
format: '<?php echo DATE_VALIDATION_FORMAT; ?>', // format MM/DD/YYYY
message: 'error message 2',
}
}
},
imported_to_dated: {
validators: {
notEmpty: {
message: 'error message 3',,
},
date: {
format: dateValidationFormat,
message: 'error message 4',,
},
callback: {
callback: function (value, validator, $field) {
var startDate = $('#imported_from_dated').val();
var endDate = $('#imported_to_dated').val();
if (startDate !== '' && endDate !== '') {
var dateSt = startDate.split('/');
var dateEd = endDate.split('/');
var StDt = Date.parse(dateSt[2] + '-' + dateSt[0] + '-' + dateSt[1]); //Year, Month, Date
var EdDt = Date.parse(dateEd[2] + '-' + dateEd[0] + '-' + dateEd[1]);
if (StDt > EdDt) {
return {
valid: false,
message: 'error message 5',
};
}
}
return true;
}
}
}
}
}
}).on("keyup",'[name="imported_from_dated"]',function() {
$("#searchDataForm").formValidation('revalidateField', 'imported_from_dated');
}).on("keyup",'[name="imported_to_dated"]',function() {
$("#searchDataForm").formValidation('revalidateField', 'imported_to_dated');
});
from the above code while i am selecting any date it will update in to MM/DD/YYYY format.
example : 09/05/2024
But i have move the js file in to seperate file and the code looks like this
PHTML file
<script type="text/javascript">
var dateFormat = '<?php echo DATE_PICKER_FORMAT; ?>';
var dateValidationFormat = <?php echo DATE_VALIDATION_FORMAT; ?>;
</script>
JS file
$('#imported_from_dated').datepicker({
format: dateFormat,
}).on('changeDate', function (e) {
$('#searchDataForm').formValidation('revalidateField', 'imported_from_dated');
if ($('#imported_to_dated').val() != '') {
$('#searchDataForm').formValidation('revalidateField', 'imported_to_dated');
}
$('#imported_from_dated').show();
});
$('#imported_to_dated').datepicker({
format: dateFormat,
}).on('changeDate', function (e) {
$('#searchDataForm').formValidation('revalidateField', 'imported_from_dated');
$('#searchDataForm').formValidation('revalidateField', 'imported_to_dated');
$('#imported_to_dated').show();
});
$('#searchDataForm').formValidation({
message: 'list message',
fields: {
imported_from_dated: {
validators: {
notEmpty: {
message: 'error message 1',
},
date: {
format: dateValidationFormat, // format MM/DD/YYYY
message: 'error message 2',
}
}
},
imported_to_dated: {
validators: {
notEmpty: {
message: 'error message 3',,
},
date: {
format: dateValidationFormat,
message: 'error message 4',,
},
callback: {
callback: function (value, validator, $field) {
var startDate = $('#imported_from_dated').val();
var endDate = $('#imported_to_dated').val();
if (startDate !== '' && endDate !== '') {
var dateSt = startDate.split('/');
var dateEd = endDate.split('/');
var StDt = Date.parse(dateSt[2] + '-' + dateSt[0] + '-' + dateSt[1]); //Year, Month, Date
var EdDt = Date.parse(dateEd[2] + '-' + dateEd[0] + '-' + dateEd[1]);
if (StDt > EdDt) {
return {
valid: false,
message: 'error message 5',
};
}
}
return true;
}
}
}
}
}
}).on("keyup",'[name="imported_from_dated"]',function() {
$("#searchDataForm").formValidation('revalidateField', 'imported_from_dated');
}).on("keyup",'[name="imported_to_dated"]',function() {
$("#searchDataForm").formValidation('revalidateField', 'imported_to_dated');
});
I have verified that the values are being passed to the JS file correctly, but I’m still getting the date in the ‘2024-09-05’ format (not converting to MM/DD/YYYY format). I can’t figure out what’s causing the issue, even though the code inside the JS file is written within the document.ready function.
