Deshabilitar el selector de fechas nativo en Google Chrome

El selector de fecha aterrizó en Chrome 20, ¿hay algún atributo para deshabilitarlo? Todo mi sistema usa jQuery UI datepicker y es un navegador cruzado, así que quiero deshabilitar el selector de fechas nativo de Chrome. ¿Hay algún atributo de etiqueta?

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

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

Podrías usar:

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

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

Esto funcionó para mi

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

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)

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="">

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

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.

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

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.

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