Unable to Change Date Format for Datepicker

Question

Our team currently uses a bootstrap template for our registration page and the datepicker that comes with it. The datepicker formats a selected date as DD/MM/YYYY. Of course, SQL uses YYYY-MM-DD, so submitting the date with the datepicker's format creates an error.

Apparently the datepicker (created by Dan Grossman) uses Moment.js, and I tried changing the format in its datepicker.js from

this.locale = {
            format: moment.localeData().longDateFormat('L')
}

to

this.locale = {
      format: moment.format('YYYY-MM-DD')
}

It didn't work. I tried looking for its other js files and found global.js. Changed the date formats indicated in the following from

try {
        $('.js-datepicker').daterangepicker({
            "singleDatePicker": true,
            "showDropdowns": true,
            "autoUpdateInput": false,
            locale: {
                format: 'DD/MM/YYYY'
            },
        });
    
        var myCalendar = $('.js-datepicker');
        var isClick = 0;
    
        $(window).on('click',function(){
            isClick = 0;
        });
    
        $(myCalendar).on('apply.daterangepicker',function(ev, picker){
            isClick = 0;
            $(this).val(picker.startDate.format('DD/MM/YYYY'));
    
        });
    
        $('.js-btn-calendar').on('click',function(e){
            e.stopPropagation();
    
            if(isClick === 1) isClick = 0;
            else if(isClick === 0) isClick = 1;
    
            if (isClick === 1) {
                myCalendar.focus();
            }
        });
    
        $(myCalendar).on('click',function(e){
            e.stopPropagation();
            isClick = 1;
        });
    
        $('.daterangepicker').on('click',function(e){
            e.stopPropagation();
        });
    
    
    } catch(er) {console.log(er);}
    /*[ Select 2 Config ]
        ===========================================================*/
    
    try {
        var selectSimple = $('.js-select-simple');
    
        selectSimple.each(function () {
            var that = $(this);
            var selectBox = that.find('select');
            var selectDropdown = that.find('.select-dropdown');
            selectBox.select2({
                dropdownParent: selectDropdown
            });
        });
    
    } catch (err) {
        console.log(err);
    }

to

 try {
        $('.js-datepicker').daterangepicker({
            "singleDatePicker": true,
            "showDropdowns": true,
            "autoUpdateInput": false,
            locale: {
                format: 'YYYY-MM-DD'
            },
        });

        var myCalendar = $('.js-datepicker');
        var isClick = 0;

        $(window).on('click',function(){
            isClick = 0;
        });

        $(myCalendar).on('apply.daterangepicker',function(ev, picker){
            isClick = 0;
            $(this).val(picker.startDate.format('YYYY-MM-DD'));

        });

        $('.js-btn-calendar').on('click',function(e){
            e.stopPropagation();

            if(isClick === 1) isClick = 0;
            else if(isClick === 0) isClick = 1;

            if (isClick === 1) {
                myCalendar.focus();
            }
        });

        $(myCalendar).on('click',function(e){
            e.stopPropagation();
            isClick = 1;
        });

        $('.daterangepicker').on('click',function(e){
            e.stopPropagation();
        });


    } catch(er) {console.log(er);}

Nothing changes. I am still very new to JavaScript and I have no idea what to do. What other solutions can I try?

UPDATE: Basing from other stackoverflow answer I found, I tried clearing the cache thinking that may be why nothing seems to change, but now the datepicker won't appear ^^;

Server Side I use Laravel for backend, and this is the function that validates and stores user data inside my RegistrationController.php For now, I'm simply trying to get the function to work, before adding better validation rules

public function store(){
        $validated = request()->validate([
            'date_of_birth' => ['required', 'dateformat:d/m/Y'],
            'gender' => ['required'],
            'email' => ['required', 'email', 'max:255', 'unique:users'],
            'contact_number' => ['required', 'digits:11'],
            'password' => ['string',Password::min(8)],
        ]);

        $attributes = array_merge($validated, [
            'user_type_id' => 3,
        ]);

        $newUser = User::create($attributes);

        return redirect('/');

    }

The function works if I manually type the date in YYYY-MM-DD format. I tried adding a mutator to User.php model too but it doesn't seem to do anything

 public function setBirthDateAttribute($value)
    {
        $this->attributes['date_of_birth'] = Carbon::createFromFormat('d/m/Y', $value)->format('Y-m-d');
    }

Answer 1

Changing the date format in the server side was what worked, by adding a mutator. I just set the mutator's name wrong. My column name was date_of_birth , but I set the mutator function's name to setBirthDateAttribute($value) when it should be setDateOfBirthAttribute($value) .

Keep in mind Laravel's powerful name conventions fellow newbies; ^^;;;

Answer 2

You do not need the "autoUpdateInput" while setting up daterangepicker , and no need to format by yourself. Simply remove the autoUpdateInput: false and $(this).val(picker.startDate.format('YYYY-MM-DD'));

 try {
        $('.js-datepicker').daterangepicker({
            "singleDatePicker": true,
            "showDropdowns": true,
            locale: {
                format: 'YYYY-MM-DD'
            },
        });

        var myCalendar = $('.js-datepicker');
        var isClick = 0;

        $(window).on('click',function(){
            isClick = 0;
        });

        $(myCalendar).on('apply.daterangepicker',function(ev, picker){
            isClick = 0;
        });

        $('.js-btn-calendar').on('click',function(e){
            e.stopPropagation();

            if(isClick === 1) isClick = 0;
            else if(isClick === 0) isClick = 1;

            if (isClick === 1) {
                myCalendar.focus();
            }
        });

        $(myCalendar).on('click',function(e){
            e.stopPropagation();
            isClick = 1;
        });

        $('.daterangepicker').on('click',function(e){
            e.stopPropagation();
        });


    } catch(er) {console.log(er);}