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

Question

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

显然，日期选择器（由 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 还是很陌生，我不知道该怎么做。我可以尝试哪些其他解决方案？

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

服务器端 我使用 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 模型添加一个突变器，但它似乎没有做任何事情

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

Answer 1

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

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

Answer 2

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

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

Unable to Change Date Format for Datepicker

javascript

php

datepicker

laravel

momentjs