Question

使用Javascript，如何检测日期输入字段中的日期格式（输入[type = date]）？

像Modernizr这样的工具只能检测使用HTML5日期选择器的功能（特别适用于移动设备，以及用于选择日期的UI）。但是，我还没有找到任何解决方案来检测浏览器使用的格式。

我有一个像这样的输入字段：

<input type="date" class="border-radius" min="2013-12-21" max="2015-12-20" data-persist-local="FromDate">

如果在localStorage中找到该值，则使用jQuery调用.val()输入该值。我认为，由于min和max属性的有效日期格式是有效的ISO格式，因此获取字段的值将返回相同的格式。事实证明，它没有。

使用瑞典语作为主要语言在Chrome浏览器（31.0.1650.63米）上进行测试时会使用ISO格式，但使用与丹麦语相同的浏览器作为主要语言会将日期格式转换为dd-mm-yyyy而不是yyyy-mm- DD。我怀疑其他语言环境是一样的。

我没有期待change the input format - 理想情况下会有一个函数来通过一致的"wire format"来获取日期，但我还没有找到办法获得任何东西，但是显示格式。

如何检测输入字段的格式，并始终在JS中转换为有效日期，然后再返回？

Answer 1

理想情况下，会有一个函数通过一致的“有线格式”来获取日期

有input.valueAsDate方法返回反映输入当前值的Date对象。

根据实验（编辑：使用Chrome和Opera桌面版本于2013-12-20 ），日期输入的显示值似乎如下格式为new Date().toLocaleDateString()返回的格式，至少在Chrome中。

在前端有一个日期的3个表示：

Javascript日期对象
输入属性和表面值
输入表示给用户的日期字符串。

从其他任何一个中获取其中任何一个：

// From Javascript `Date` object to input value:
new Date().toISOString().substr( 0, 10 );

// From Javascript `Date` object to input display:
new Date().toLocaleDateString();

// From input value to Javascript `Date`:
input.valueAsDate;

// From input value to input display (step 3, then step 2):
input.valueAsDate.toLocaleDateString();

// From input display to Javascript `Date` object:
new Date( input.valueAsDate );

// From input display to input value (step 5, then step 1):
new Date( input.valueAsDate ).toISOString().substr( 0, 10 );

编辑：

上述情况恰好适用于Chrome。 Desktop Safari 5.1.7以ISO格式显示时间，这意味着您输入的内容是用户看到的内容。 iOS Safari以dd mmm yyyy格式显示缩写月份名称的下拉列表。所以似乎没有标准。

这是一个小功能，可以为您提供适用于桌面Chrome和Linux的正确转换功能。仅限Opera：

var dateInput = ( function inputDateClosure(){
    // Type checking
    function getType( x ){
        return Object.prototype.toString.call( x );
    }

    function isDate( x ){
        return getType( x ) === '[object Date]';
    }

    function isInput( x ){
        return getType( x ) === '[object HTMLInputElement]' || '[object Object]' && Object.prototype.hasOwnProperty.call( x, 'value' );
    }

    function isString( x ){
        return getType( x ) === '[object String]';
    }

    function fromDateToValue( x ){
        return x.toISOString().substr( 0, 10 );
    }

    function fromDateToString( x ){
        return x.toLocaleDateString();
    }

    function fromInputToDate( x ){
        return x.valueAsDate;
    }

    function fromStringToDate( x ){
        return new Date( x.valueAsDate );
    }

    return function( x ){
        if( isDate( x ) ){
            return {
                asDate   :                   x,
                asValue  : fromDateToValue(  x ),
                asString : fromDateToString( x )
            }
        }
        else if( isString( x ) ){
            return {
                asDate   :                   fromStringToDate( x ),
                asValue  : fromDateToValue(  fromStringToDate( x ) ),
                asString : fromStringToDate( fromDateToString( x ) )
            }
        }
        else if( isInput( x ) ){
            return {
                asDate   :                   fromInputToDate( x ),
                asValue  : fromDateToValue(  fromInputToDate( x ) ),
                asString : fromDateToString( fromInputToDate( x ) )
            }
        }
    }
}() );

Answer 2

我认为我有一个更简单的解决方案。不知道它是否可以在任何浏览器上运行，但是假设javascript日期函数使用相同的本地格式，则可以运行：

 $(".date").on("change", function () {
      var selectedDate = new Date(jQuery(this).val());

      var selectedDateFormat = selectedDate.toLocaleDateString()
          .replace(selectedDate.getDate(), "DD")
          .replace(selectedDate.getMonth()+1, "MM")
          .replace(selectedDate.getFullYear(), "YYYY");

           console.log(selectedDateFormat);
 });

但是无论如何，在这一点上我们可能不需要这个，因为重点是使用任何浏览器日期格式，如果Im没错，则以我们希望的格式发送它。在这种情况下，我将以另一种方式做到这一点：

$(".date").on("change", function () {
   var selectedDate = new Date(jQuery(this).val());
   this.setAttribute('value', 
   (selectedDate.getMonth() + 1) +
   '/' + selectedDate.getDate() +
   '/' + selectedDate.getFullYear());
});

如何检测浏览器的输入格式[type = date]

2 个答案:

从其他任何一个中获取其中任何一个：

编辑：