html - type - Deshabilitar el marcador de fecha nativo en Google Chrome

input type date formato dd-mm-yyyy

Question

El selector de fecha llegó a Chrome 20, ¿hay algún atributo para desactivarlo? Todo mi sistema usa jQuery UI datepicker y es un navegador de doble sentido, así que quiero desactivar el datepicker nativo de Chrome. ¿Hay algún atributo de etiqueta?

Answer 1

Con Modernizr ( http://modernizr.com/ ), puede verificar esa funcionalidad. Entonces puedes atarlo al booleano que devuelve:

// does not trigger in Chrome, as the date Modernizr detects the date functionality.
if (!Modernizr.inputtypes.date) { 
    $("#opp-date").datepicker();
}

Answer 2

El código anterior no establece el valor del elemento de entrada ni dispara 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 String personalizado simple para rellenar cadenas con ceros (obligatorio)

Answer 3

Esto funcionó para mí

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

Answer 4

Esto funciona para mí:

;
(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 desactivar la nueva entrada de fecha Chrome HTML5?

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

Answer 5

Estoy de acuerdo con Robertc, la mejor manera es no usar type = date, pero mi plugin 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="">

Answer 6

Para Laravel5 ya que uno usa

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

=> Chrome forzará su selector de fecha. => ¡Si se 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 (''tipo'', ''texto'');

$("#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'');

Answer 7

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

Answer 8

Podrías usar:

jQuery(''input[type="date"]'').live(''click'', function(e) {e.preventDefault();}).datepicker();

Answer 9

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

Puede usar http://modernizr.com/ para detectar si el navegador admite tipos de entrada HTML5, como ''fecha''. Si lo hace, esos controles usarán el comportamiento nativo para mostrar cosas como datapickers. Si no lo hace, puede especificar qué secuencia de comandos se debe usar para mostrar su propio selector de fecha. ¡Me funciona bien!

jquery-ui y Modernizr a mi página, luego agregué 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 marcador de fecha nativo se muestra en Chrome, y el jquery-ui se muestra en IE.

Answer 10

Si ha usado mal <input type="date" /> , 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 marcador de fecha personalizado:

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

O podrías darles una clase:

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

Answer 11

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