Question

我想使用Twitter Bootstrap的datepicker。我希望以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
});

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

Answer 1

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

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

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中使用默认的日期选择器。特别是，我想要手机上的滚动行为。

我将输入类型设置为“ date”，并将值传递为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();

        }

Bootstrap日期选择器格式在显示时的日期与在值上的不同

4 个答案: