Deshabilitar el selector de fechas nativo en Google Chrome

Respuestas:

140

Para ocultar la flecha:

input::-webkit-calendar-picker-indicator{
    display: none;
}

Y para ocultar el mensaje:

input[type="date"]::-webkit-input-placeholder{ 
    visibility: hidden !important;
}
— Yacine Zalouani
fuente
3
:: - webkit-input-placeholder no ocultará el texto "mm / dd / aaaa" porque no es un marcador de posición, está controlado de forma nativa.
— Justin Bull
1
También le falta un selector. Para referencia: stackoverflow.com/a/11418704/229787
— Justin Bull
Por lo que puedo decir, esto no funciona en Android Chrome - fiddle.jshell.net/RgY3t/138
— Seb Charrot
54

Si ha hecho un mal <input type="date" />uso, probablemente pueda usar:

$('input[type="date"]').attr('type','text');

después de que se hayan cargado para convertirlos en entradas de texto. Primero deberá adjuntar su selector de fecha personalizado:

$('input[type="date"]').datepicker().attr('type','text');

O podrías darles una clase:

$('input[type="date"]').addClass('date').attr('type','text');
— rjmunro
fuente
5
Fácilmente mi solución favorita. Es simple y no implementa selectores CSS específicos del navegador. El resultado previsto, en mi opinión, debería ser evitar el control nativo si JavaScript está habilitado, lo que permite un selector de fecha personalizado. Sin embargo, si JavaScript está deshabilitado, los controles nativos aún funcionan. Honestamente, esta debería ser la respuesta aceptada.
— Justin Bull
2
@ travesty3, ¿esas versiones de IE son compatibles con los selectores de fechas html5 o simplemente recurren al texto? Si no es así, no importa.
— rjmunro
2
No entiendo por qué usar <input type = "date"> para un campo de fecha es un mal uso de él. (primera oración de esta respuesta)
— Steve
3
Es perfectamente válido no querer un selector de fecha de calendario para un campo como Fecha de nacimiento, pero aún querer que el campo sea validado por el navegador nativo.
— Duncanmoo
1
@Duncanmoo ¿Qué tienen de especial las fechas de nacimiento? Simplemente establezca el máximo en hoy (si desea permitir que los bebés ingresen el día en que nacen), o hace N años, donde N es la edad mínima para los usuarios de su sitio. Especialmente en dispositivos móviles, prefiero usar el selector de fecha nativo del navegador para ingresar mi fecha de nacimiento que algo JS personalizado. Además, ¿cuántas implementaciones de selector de fechas JS personalizadas existen que no admiten la validación?
— rjmunro
15

Podrías usar:

jQuery('input[type="date"]').live('click', function(e) {e.preventDefault();}).datepicker();
— Jimbo
fuente
3
si usa jQuery> = 1.7:jQuery('input[type="date"]').on('click', function(e) {e.preventDefault();}).datepicker();
— yorch
Esta respuesta no elimina el estilo nativo. stackoverflow.com/a/11418704/229787
— Justin Bull
4
@JustinBull es cierto, pero la pregunta no se trataba de eliminar el estilo, sino de permitir que se usara el selector de fechas jQuery en su lugar, lo que logra esta respuesta. ¿Alguna idea de cómo se puede eliminar también el peinado?
— Jimbo
7

Con Modernizr ( http://modernizr.com/ ), puede verificar esa funcionalidad. Luego puede vincularlo al booleano que devuelve:

// does not trigger in Chrome, as the date Modernizr detects the date functionality.
if (!Modernizr.inputtypes.date) { 
    $("#opp-date").datepicker();
}
— CodeFinity
fuente
3
Esto es bastante útil para volver a jQuery datepicker cuando un datepicker nativo no está disponible. Sin embargo, esta pregunta parece tratar de deshacerse del selector de fechas de Chrome, así que voté en contra de su respuesta.
— Sam
7

Esto funcionó para mi

input[type=date]::-webkit-inner-spin-button, 
input[type=date]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
— Mantisimo
fuente
2

El código anterior no establece el valor del elemento de entrada ni desencadena un evento de cambio. El siguiente código funciona en Chrome y Firefox (no probado en otros navegadores):

$('input[type="date"]').click(function(e){
     e.preventDefault();
}).datepicker({
    onSelect: function(dateText){
        var d = new Date(dateText),
        dv = d.getFullYear().toString().pad(4)+'-'+(d.getMonth()+1).toString().pad(2)+'-'+d.getDate().toString().pad(2);
        $(this).val(dv).trigger('change');
    }
});

pad es un método de cadena personalizado simple para rellenar cadenas con ceros (obligatorio)

— MartijnR
fuente
1

Estoy de acuerdo con Robertc, la mejor manera es no usar type = date, pero mi complemento JQuery Mobile Datepicker lo usa. Entonces tengo que hacer algunos cambios:

Estoy usando jquery.ui.datepicker.mobile.js e hice estos cambios:

Desde (línea 51)

$( "input[type='date'], input:jqmData(type='date')" ).each(function(){

a

$( "input[plug='date'], input:jqmData(plug='date')" ).each(function(){

y en el formulario use, escriba texto y agregue el complemento var:

<input type="text" plug="date" name="date" id="date" value="">
— ebelendez
fuente
3
Si desea agregar atributos personalizados para datos de secuencia de comandos locales, la forma válida es usar data-*atributos . En este caso, llame a su atributo en data-pluglugar de plug, entonces se garantiza que nunca chocará con ningún atributo nuevo agregado en HTML6 / 7/8 / etc.
— robertc
1

Yo uso lo siguiente (coffeescript):

$ ->
  # disable chrome's html5 datepicker
  for datefield in $('input[data-datepicker=true]')
    $(datefield).attr('type', 'text')
  # enable custom datepicker
  $('input[data-datepicker=true]').datepicker()

que se convierte a JavaScript simple:

(function() {
  $(function() {
    var datefield, _i, _len, _ref;
    _ref = $('input[data-datepicker=true]');
    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
      datefield = _ref[_i];
      $(datefield).attr('type', 'text');
    }
    return $('input[data-datepicker=true]').datepicker();
  }); 
}).call(this);
— Paolo Dona
fuente
1

Esto funcionó para mí:

// Hide Chrome datetime picker
$('input[type="datetime-local"]').attr('type', 'text');

// Reset date values
$("#EffectiveDate").val('@Model.EffectiveDate.ToShortDateString()');
$("#TerminationDate").val('@Model.TerminationDate.ToShortDateString()');

Aunque el valor de los campos de fecha todavía estaba allí y era correcto, no se mostró. Es por eso que restablezco los valores de fecha de mi modelo de vista.

— Cogitador
fuente
0

Esto funciona para mi:

;
(function ($) {
    $(document).ready(function (event) {
        $(document).on('click input', 'input[type="date"], input[type="text"].date-picker', function (e) {
            var $this = $(this);
            $this.prop('type', 'text').datepicker({
                showOtherMonths: true,
                selectOtherMonths: true,
                showButtonPanel: true,
                changeMonth: true,
                changeYear: true,
                dateFormat: 'yy-mm-dd',
                showWeek: true,
                firstDay: 1
            });

            setTimeout(function() {
                $this.datepicker('show');
            }, 1);
        });
    });
})(jQuery, jQuery.ui);

Ver también:

¿Cómo puedo deshabilitar la nueva entrada de fecha HTML5 de Chrome?

http://zizhujy.com/blog/post/2014/09/18/Add-date-picker-to-dynamically-generated-input-elements.aspx

— Jeff Tian
fuente
0

Sé que esta es una vieja pregunta ahora, pero acabo de aterrizar aquí buscando información sobre esto para que alguien más pueda hacerlo también.

Puede utilizar Modernizr para detectar si el navegador admite tipos de entrada HTML5, como 'fecha'. Si es así, esos controles usarán el comportamiento nativo para mostrar elementos como selectores de fechas. Si no es así, puede especificar qué secuencia de comandos debe usarse para mostrar su propio selector de fechas. ¡Funciona bien para mí!

Añadí jquery-ui y Modernizr a mi página, a continuación, añadir este código:

<script type="text/javascript">
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(initDateControls);
    initDateControls();

    function initDateControls() {
        //Adds a datepicker to inputs with a type of 'date' when the browser doesn't support that HTML5 tag (type=date)'
        Modernizr.load({
            test: Modernizr.inputtypes.datetime,
            nope: "scripts/jquery-ui.min.js",
            callback: function () {
                $("input[type=date]").datepicker({ dateFormat: "dd-mm-yy" });
            }
        });
    }

</script>

Esto significa que el selector de fecha nativo se muestra en Chrome y el jquery-ui se muestra en IE.

— Philip Stratford
fuente
0

Para Laravel5 Dado que se usa

{!! Form :: input ('date', 'date_start', null, ['class' => 'form-control', 'id' => 'date_start', 'name' => 'date_start']) !!}

=> Chrome forzará su selector de fecha. => si lo quita con css obtendrá los errores de formato habituales !! (El valor especificado no se ajusta al formato requerido, "aaaa-MM-dd".)

SOLUCIÓN:

$ ('input [type = "date"]'). attr ('type', 'text');

$("#date_start").datepicker({
    autoclose: true,
    todayHighlight: true,
    dateFormat: 'dd/mm/yy',
    changeMonth: true,
    changeYear: true,
    viewMode: 'months'
});
$("#date_stop").datepicker({
    autoclose: true,
    todayHighlight: true,
    dateFormat: 'dd/mm/yy',
    changeMonth: true,
    changeYear: true,
    viewMode: 'months'
});
$( "#date_start" ).datepicker().datepicker("setDate", "1d");
$( "#date_stop" ).datepicker().datepicker("setDate", '2d');
— Mathieu Dierckx
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.