无法更改日期选择器的日期格式

Question

我们的团队目前为我们的注册页面和随附的日期选择器使用引导模板。 日期选择器将所选日期格式化为 DD/MM/YYYY。当然，SQL 使用的是 YYYY-MM-DD，所以以 datepicker 的格式提交日期会产生错误。

显然 datepicker（由 Dan Grossman 创建）使用 Moment.js，我尝试从

更改其 datepicker.js 中的格式

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

到

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

没有用。我尝试寻找它的其他 js 文件并找到 global.js。将以下日期格式更改为

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);
    }

到

 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);}

没有任何变化。 我对 JavaScript 还是很陌生，我不知道该怎么做。我还可以尝试哪些其他解决方案？

更新：根据我找到的其他 stackoverflow 答案，我尝试清除缓存，认为这可能是为什么似乎没有任何变化，但现在日期选择器不会出现 ^^;

服务器端 我使用 Laravel 作为后端，这是在我的 RegistrationController.php 中验证和存储用户数据的函数 现在，我只是想让函数工作，然后再添加更好的验证规则

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('/');

    }

如果我以 YYYY-MM-DD 格式手动输入日期，该功能将起作用。我也尝试向User.php 模型添加一个mutator，但它似乎没有做任何事情

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

Answer 1

通过添加一个 mutator 来更改服务器端的日期格式是有效的。我只是将突变器的名称设置错了。我的列名是 date_of_birth，但我将 mutator 函数的名称设置为 setBirthDateAttribute($value) setDateOfBirthAttribute($value).

请记住 Laravel 强大的命名约定各位新手！ ^^;;;

Answer 2

设置daterangepicker时不需要“autoUpdateInput”，也不需要自己格式化。 只需删除 autoUpdateInput: false 和 $(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);}