如何检测浏览器的输入格式[type = date] [英] How to detect the browser's format for input[type=date]

问题描述

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

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

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

 < input type =dateclass =border-radiusmin =2013-12-21max =2015-12-20 data-persist-local =FromDate> 
  

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

使用瑞典语作为主要语言的Chrome浏览器（31.0.1650.63 m）进行测试可以获得ISO格式，但使用相同的浏览器丹麦语作为主要语言将日期格式转换为dd-mm-yyyy而不是yyyy-mm-dd。我怀疑其他地区的情况是一样的。

我不是在寻找更改输入格式 - 理想情况下，将有一个函数通过一致的\"wire格式，但是我没有找到一种方式来获取显示格式。 / p>

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

解决方案

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

有一个 input.valueAsDate 方法返回一个 Date 输入的当前值。

根据实验（编辑：使用Chrome和Opera桌面版ns on 2013-12-20 ），似乎日期输入的显示值与 new Date（）返回的格式相同。toLocaleDateString（ ），至少在Chrome中。

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

1. Javascript日期对象


2. 输入属性和表情值的ISO日期字符串


3. 用户输入的日期字符串。

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

  //从Javascript`Date`对象输入值：
 new Date（）。toISOString（）。substr （0,10）; 
 
 //从Javascript`Date`对象输入显示：
 new Date（）。toLocaleDateString（）; 
 
 //从输入值到Javascript`Date`：
 input.valueAsDate; 
 
 //从输入值到输入显示（步骤3，然后是步骤2）：
 input.valueAsDate.toLocaleDateString（）; 
 
 //从输入显示到Javascript`Date`对象：
 new Date（input.valueAsDate）; 
 
 //从输入显示到输入值（步骤5，然后是步骤1）：
 new Date（input.valueAsDate）.toISOString（）。substr（0，10）; 
  

编辑：

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

这是一个小功能，将为您提供桌面Chrome&仅限Opera：

  var dateInput =（function inputDateClosure（）{
 //键入检查
 function getType （x）{
 return Object.prototype.toString.call（x）; 
} 
 
函数isDate（x）{
 return getType（x）== ='[object Date]'; 
} 
 
函数isInput（x）{
返回getType（x）==='[object HTMLInputElement]'||'对象]'&&&&  Object.prototype.hasOwnProperty.call（x，'value'）; 
} 
 
函数isString（x）{
返回getType（x） ==='[object String]'; 
} 
 
函数fromDateToValue（x）{
 return x.toISOString（）。substr（0，10）; 
 
 
函数fromDateToString（x）{
 return x.toLocaleDateString（）; 
} 
 
函数fromInputToDate（x）{
返回x.valueAsDate; 
} 
 
函数fromStringToDate（x）{
返回新的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）） 
} 
} 
} 
}（））; 
  

Using Javascript, how would it be possible to detect the format of dates in date input fields (input[type=date])?

Tools like Modernizr only detect the capability of using an HTML5 datepicker (desirable especially for mobile devices, and their UI for selecting dates). However, I haven't been able to find any solution on detecting the format used by the browser.

I have an input field like this:

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

The value is entered with a jQuery call .val() if it's found in localStorage. I thought that since valid date formats for min and max attributes are in valid ISO format, getting the value of the field would return the same format. It turns out, it doesn't.

Testing on a Chrome browser (31.0.1650.63 m) with Swedish as primary language gives the ISO format, but using the same browser with Danish as primary language reverses the date format to dd-mm-yyyy instead of yyyy-mm-dd. I suspect it's the same for other locales.

I'm not looking to change the input format - and ideally there would be a function to get the date by a consistent "wire format" but I haven't found a way to get anything but the display format.

How do I detect the format of the input field, and consistently convert to a valid Date in JS, and back again?

解决方案

ideally there would be a function to get the date by a consistent "wire format"

There's a input.valueAsDate method which returns a Date object reflecting the input's current value.

According to experimentation (edit: with Chrome & Opera desktop versions on 2013-12-20), it appears that the displayed value of date inputs follows the same format as that returned by new Date().toLocaleDateString(), at least in Chrome.

There are then 3 representations of a date in action on the front-end:

1. The Javascript date object
2. The ISO date string for the input's attributes and ostensible value
3. The date string represented to the user by the input.

To get any one of these from any of the other:

// 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 );

EDIT:

The above happens to work on Chrome. Desktop Safari 5.1.7 displays time in ISO format, meaning what you input is what the user sees. iOS Safari displays a dropdown with abbreviated month names in the format dd mmm yyyy. So it seems there is no standard.

Here's a little function that will give you the right conversions for desktop Chrome & Opera only:

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

这篇关于如何检测浏览器的输入格式[type = date]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！