首页 > 解决方案 > 无法更改日期选择器的日期格式

问题描述

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

显然 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模型添加一个突变体,但它似乎没有做任何事情

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

标签: javascriptphplaraveldatepickermomentjs

解决方案


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

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


推荐阅读