[英]Bootstrap datepicker format date differently on display than on value
I want to use Twitter Bootstrap's datepicker.我想使用 Twitter Bootstrap 的日期选择器。 I want the actual input to DISPLAY in the format mm/dd/yyyy but the value of the object I want it to create/pass should be in yyyy-mm-dd.
我想要格式为 mm/dd/yyyy 的 DISPLAY 的实际输入,但我希望它创建/传递的对象的值应该在 yyyy-mm-dd 中。 I am aware of this property:
我知道这个属性:
"data-date-format" => "mm-dd-yyyy"
But that changes both the way the date is displayed and how the value is formatted.但这会改变日期的显示方式和值的格式。 I also have this in my JS:
我的 JS 中也有这个:
$(this).datepicker({
format: 'yyyy-mm-dd',
autoclose: true,
todayHighlight: true,
pickTime: false
});
I'm not really sure what the format part is doing, but changing it doesn't change the value that is created by the input.我不太确定格式部分在做什么,但更改它并不会更改由输入创建的值。
When I am faced with such a problem, where I want data displayed differently than I want it communicated, I usually write a short script to copy the value into a hidden element where I maintain the 'correctly'-formatted data which the user does not see.当我遇到这样的问题时,我希望数据以不同于我希望传达的方式显示,我通常会编写一个简短的脚本将值复制到一个隐藏元素中,在那里我维护用户不知道的“正确”格式的数据看。
This is the best solution I can offer at the moment, as I do not know of any way to convince the Bootstrap Datepicker to use two formats simultaneously.这是我目前可以提供的最佳解决方案,因为我不知道有什么方法可以说服 Bootstrap Datepicker 同时使用两种格式。
there's a solution from bootstrap for this problem. bootstrap 有一个解决方案可以解决这个问题。
you can set format as an object with 2 parsing functions: toValue and toDisplay.您可以将格式设置为具有 2 个解析函数的对象:toValue 和 toDisplay。
$('.datepicker').datepicker({
format: {
/*
* Say our UI should display a week ahead,
* but textbox should store the actual date.
* This is useful if we need UI to select local dates,
* but store in UTC
*/
toDisplay: function (date, format, language) {
var d = new Date(date);
d.setDate(d.getDate() - 7);
return d.toISOString();
},
toValue: function (date, format, language) {
var d = new Date(date);
d.setDate(d.getDate() + 7);
return new Date(d);
}
},
autoclose: true
});
here is example script to copy the value into a hidden element to maintain yyyy-mm-dd format :这是将值复制到隐藏元素以保持 yyyy-mm-dd 格式的示例脚本:
$('.datepicker').on('changeDate', function(e){
var date = e.date;
var day = ('0' + date.getDate()).slice(-2);
var month = ('0' + (date.getMonth() + 1)).slice(-2);
var year = date.getFullYear();
console.log(year + '-' + month + '-' + day);
$(this).next('input[type=hidden]').val(year + '-' + month + '-' + day);
});
I wanted to use the default date pickers in Chrome, FF, Edge, and Safari.我想在 Chrome、FF、Edge 和 Safari 中使用默认日期选择器。 In particular, I wanted the scrolling behavior on the phone.
特别是,我想要手机上的滚动行为。
I set the input type to "date" and pass in the value as yyyy-mm-dd.我将输入类型设置为“日期”并将值作为 yyyy-mm-dd 传入。 This works great on Chrome, FF, Edge, and Safari.
这在 Chrome、FF、Edge 和 Safari 上效果很好。 Automatically gets formatted as mm/dd/yyyy except in Safari, which shows longer format.
自动格式化为 mm/dd/yyyy,但在 Safari 中除外,它显示更长的格式。
IE doesn't support the "date" type. IE 不支持“日期”类型。 So, when I pass the data into the "date" textbox, it needs to be converted manually to mm/dd/yyyy format and then I use the bootstrap datepicker.
因此,当我将数据传递到“日期”文本框时,需要手动将其转换为 mm/dd/yyyy 格式,然后我使用引导程序日期选择器。
So I test for IE.所以我测试IE。 Then, if it is, do the transformation in the val()
然后,如果是,则在 val() 中进行转换
// Format the values to be mm/dd/yyyy
ElementsJQ.val(function (index, value) {
// Check for a date value
let testDate = new Date(value);
if (isNaN(testDate.getMonth())) {
$(this).attr('value', '');
return '';
}
// Parse the value to get its parts
let dateParts_ = value.split('-');
if (dateParts_.length != 3) {
$(this).attr('value', '');
return '';
}
// Create formatted date
let formattedDate = dateParts_[1] + '/' + dateParts_[2] + '/' + dateParts_[0];
// Test - real date?
testDate = new Date(formattedDate);
if (isNaN(testDate.getMonth())) {
$(this).attr('value', '');
return '';
}
$(this).attr('value', formattedDate);
return formattedDate;
});
// Apply bootstrap date picker.
ElementsJQ.datepicker();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.