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

Question

我们的团队目前使用一个引导模板为我们的注册页面和它附带的日期选择器。日期选择器将选定的日期格式化为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格式的日期，该功能有效。我也尝试添加一个mutatorUser.php模型但它似乎没有做任何

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

您不需要';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);}