javascript - 无法更改日期选择器的日期格式
问题描述
我们的团队目前为我们的注册页面和随附的日期选择器使用引导模板。日期选择器将所选日期格式化为 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');
}
解决方案
通过添加一个mutator来改变服务器端的日期格式是有效的。我只是将突变器的名称设置错了。我的列名是date_of_birth
,但我将 mutator 函数的名称设置为setBirthDateAttribute($value)
when it should be
setDateOfBirthAttribute($value)
。
请记住 Laravel 强大的命名约定各位新手!^^;;;
推荐阅读
- excel - 我在 VBA 中创建超链接时遇到问题
- javascript - 如何使用ajax附加多个值
- javascript - 如何在 React 中使用 Google Calendar API 从活动中获取与会者列表?
- android - 渐进式 Web 应用的局限性:将原生应用转变为渐进式 Web 应用
- php - laravel-voyager 产品前端没有显示图片和文字
- python - scipy安装失败
- css - Flex-box with the central element that fills all the free space
- wordpress - 我需要借助插件将帖子从我的 wp 站点转移到另一个 wp 站点
- php - 如何在 php 中解析 phantom.js 输出?
- mongodb - 带有教义-odm 聚合的 symfony4 不起作用