Bootstrap datepicker 显示的日期格式与值的格式不同

Posted 2023-05-07

【中文标题】Bootstrap datepicker 显示的日期格式与值的格式不同

【英文标题】：Bootstrap datepicker format date differently on display than on value

【发布时间】：2015-05-15 06:49:24

【问题描述】：

我想使用 Twitter Bootstrap 的日期选择器。我希望以 mm/dd/yyyy 格式对 DISPLAY 进行实际输入，但我希望它创建/传递的对象的值应该在 yyyy-mm-dd 中。我知道这个属性：

"data-date-format" => "mm-dd-yyyy"

但这会改变日期的显示方式和值的格式。我的 JS 中也有这个：

$(this).datepicker(
  format: 'yyyy-mm-dd',
  autoclose: true,
  todayHighlight: true,
  pickTime: false
);

我不太确定格式部分在做什么，但更改它不会更改输入创建的值。

【问题讨论】：

我也想看看这个功能，我想以英国本地格式（dd/mm/yyyy）显示日期，但由于一块需要解析为yyyy-mm-dd我正在使用的软件。另外我认为“数据日期格式”和“格式”是一回事，只是一个通过 html 附加，另一个通过 JS 附加。

在这里查看我的答案***.com/a/47466659/1153909

【参考方案1】：

当我遇到这样的问题时，我希望数据显示的方式与我希望的传达方式不同，我通常会编写一个简短的脚本来将值复制到一个隐藏元素中，在该隐藏元素中维护“正确”格式的数据用户看不到。

这是我目前可以提供的最佳解决方案，因为我不知道有什么方法可以说服 Bootstrap Datepicker 同时使用两种格式。

【参考方案2】：

bootstrap 有解决这个问题的方法。

正如docs上所说的

您可以将格式设置为具有 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 
);

【讨论】：

这是完美的解决方案。谢谢。

这根本没有解决原来的问题：显示的日期仍然是表单提交上发布的日期。这仅允许您定义字符串到日期和日期到字符串的转换函数，以便可以手动编辑输入字段与日历视图一致。

@ZeRemz 好吧，它似乎对我和 OP 都有效，太奇怪了。

【参考方案3】：

这是将值复制到隐藏元素以保持 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);
    );

【参考方案4】：

我想在 Chrome、FF、Edge 和 Safari 中使用默认日期选择器。特别是，我想要手机上的滚动行为。

我将输入类型设置为“日期”并将值作为 yyyy-mm-dd 传入。这适用于 Chrome、FF、Edge 和 Safari。自动格式化为 mm/dd/yyyy，但在 Safari 中显示更长的格式。

IE 不支持“日期”类型。因此，当我将数据传递到“日期”文本框时，需要手动将其转换为 mm/dd/yyyy 格式，然后使用引导程序日期选择器。

所以我测试了 IE。然后，如果是，则在 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();