Bootstrap 日期选择器格式日期显示与值不同

Question

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

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

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

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

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

Answer 1

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

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

Answer 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 
});

Answer 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);
    });

Answer 4

我想在 Chrome、FF、Edge 和 Safari 中使用默认日期选择器。特别是，我想要 phone.

上的滚动行为

我将输入类型设置为“日期”，并将值作为 yyyy-mm-dd 传递。这在 Chrome、FF、Edge 和 Safari 上效果很好。自动格式化为 mm/dd/yyyy，但在 Safari 中除外，它显示更长的格式。

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

所以我测试了 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();

        }

Bootstrap 日期选择器格式日期显示与值不同

Bootstrap datepicker format date differently on display than on value

javascript

formatting

datetime

datepicker

twitter-bootstrap