validacion - validar formulario javascript onclick

Cómo detectar el formato del navegador para la entrada

Question

Usando Javascript, ¿cómo sería posible detectar el formato de las fechas en los campos de entrada de fecha (entrada [tipo = fecha])?

Las herramientas como Modernizr solo detectan la capacidad de utilizar un marcador de fecha HTML5 (deseable especialmente para dispositivos móviles y su interfaz de usuario para seleccionar fechas). Sin embargo, no he podido encontrar ninguna solución para detectar el formato utilizado por el navegador.

Tengo un campo de entrada como este:

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

El valor se ingresa con una llamada jQuery .val() si se encuentra en localStorage. Pensé que dado que los formatos de fecha válidos para los atributos mínimo y máximo están en formato ISO válido, obtener el valor del campo devolvería el mismo formato. Resulta que no es así.

Probar en un navegador Chrome (31.0.1650.63 m) con el idioma sueco como principal proporciona el formato ISO, pero usar el mismo navegador con el idioma danés como principal cambia el formato de fecha a dd-mm-aaaa en lugar de aaaa-mm-dd. Sospecho que es lo mismo para otras configuraciones regionales.

No estoy buscando cambiar el formato de entrada , e idealmente habría una función para obtener la fecha mediante un "formato de cable" coherente , pero no he encontrado una manera de obtener nada más que el formato de visualización.

¿Cómo puedo detectar el formato del campo de entrada y convertirlo constantemente a una fecha válida en JS y viceversa?

Answer 1

idealmente habría una función para obtener la fecha mediante un "formato de cable" consistente

Hay un método input.valueAsDate que devuelve un objeto Date que refleja el valor actual de la entrada.

De acuerdo con la experimentación ( editar: con las versiones de escritorio de Chrome y Opera el 20-12-2013 ), parece que el valor mostrado de las entradas de fecha sigue el mismo formato que el que new Date().toLocaleDateString() , al menos en Chrome .

Entonces hay 3 representaciones de una fecha en acción en el front-end:

1. El objeto de fecha de Javascript
2. La cadena de fecha ISO para los atributos de la entrada y el valor ostensible
3. La cadena de fecha representada al usuario por la entrada.

Para obtener cualquiera de estos de cualquiera de los otros:

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

EDITAR:

Lo anterior funciona en Chrome. Desktop Safari 5.1.7 muestra la hora en formato ISO, lo que significa que lo que ingresa es lo que ve el usuario. iOS Safari muestra un menú desplegable con los nombres abreviados de los meses en el formato dd mmm yyyy . Entonces parece que no hay un estándar.

Aquí hay una pequeña función que le dará las conversiones correctas solo para Chrome y Opera de escritorio:

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