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.