En mi archivo php, quiero usar el jQuery Datepicker.

Cuando mi carga de un archivo, crear el Datepicker de movilidad.

Entonces, cuando un campo especial en mi archivo php (es un formulario) se llena, quiero activar el selector de fecha.

Así que, inicialmente mi Datepicker se parece a esto:

$("#from").datepicker({
    showOn: "both",
    buttonImage: "calendar.gif",
    buttonImageOnly: true,
    buttonText: "Kalender",
    showAnim: "drop",
    dateFormat: "dd.mm.yy",
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    showWeek: true,
    firstDay: 1,
    dayNamesMin: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
    weekHeader: "KW",
    disabled: true,
    onClose: function(selectedDate) {
        $("#to").datepicker("option", "minDate", selectedDate);
    }
});

Este funciona bien, ningún problema hasta ahora. El problema viene, cuando quiero desactivar el campo.

Si un campo especial se llena, que me llame $("#from").datepicker('enable');

Esto también funciona bien, PERO ahora quiero desactivar de nuevo si el campo especial que he mencionado de nuevo vacía.

Entonces yo uso $("#from").datepicker('disable'); y el campo es de color gris, pero todavía puedo utilizar el campo para introducir valores, el calendario aparece e incluso el calendario de la imagen junto a la casilla que puede hacer clic.

Alguien tiene una idea de por qué este es el caso? Me estoy perdiendo algo?

InformationsquelleAutor A K | 2013-08-21

18 Comentarios

  1. 61

    $("#from").datepicker('disable'); debería funcionar, pero también puede probar este:

    $( "#from" ).datepicker( "option", "disabled", true );
    • Esto no parece funcionar aunque no entiendo por qué no funciona. El .la proposición-la idea de que Shaun Hare mencionadas obras aunque
    • puede usted proporcionar un el violín que se reproduce el problema?
    • Yo nunca he usado que antes, sólo probado. De alguna manera no parece incluir jQuery-FW, sin embargo, incluso a pesar de que hace clic en «Marcos & Extensiones»..lo Siento 🙁
    • Aquí, jsfiddle.net/VMzLG puse una simple demo, sorprendentemente, la única manera que tengo con éxito deshabilitar fue mediante el código de tu pregunta
    • Que es extraño….su demostración se muestra exactamente como yo pensaba que iba a funcionar. Pero en mi código, no funciona. Tengo una reunión pronto, voy a mirar en esto después de que. Puede ser mañana, aunque…
    • Me encontré por fin! Se trata de un fallo interno….utilizamos forma especial-elementos y después he desactivado el tema, me dio la clase de un nuevo nombre…PERO se me olvidó añadir un «hasDatepicker» para el nuevo nombre de clase. Lo siento a todos, pero todos sus consejos me ha ayudado a resolver el misterio. Gracias a todos!! 🙂
    • Me alegra saber que ordenan las cosas 🙂 la próxima vez, aunque se debe incluir todo el código correspondiente en su pregunta, así que podemos ayudarle a identificar el problema más fácilmente
    • Tiene usted razón! Estoy un poco avergonzado de mí mismo que he hecho una emberassing error. Pero me alegro de que todos son una comunidad agradable. Gracias a todos de nuevo! 🙂
    • $("#from").datepicker('disable'); $("#from").datepicker('enable'); trabajó para mí. el otro $( "#from" ).datepicker( "option", "disabled", true ); no funciona.
    • Si usted está tratando de deshabilitar todos los controles dentro de un div de que este es uno, puede ser necesario desactivar el selector de fechas primero y luego el resto de los controles.
    • Hola, la forma en que $('selector').datepicker('disable') no puedo encontrar donde esto está documentado. Me pueden ayudar?
    • No trabajo para mí…
    • Advertencia: Al menos en jQuery-UI 1.9.0 (que yo estoy a utilizar en un proyecto), el documentación es incorrecta. datepicker('option', 'disabled', true/false) no funciona; en su lugar usted necesita para utilizar los métodos directos datepicker('disable') y datepicker('enable').

  2. 14

    intentar

    $("#from").datepicker().datepicker('disable');
    • pero mientras este se reinicia mi existentes selector de fecha para la de por defecto. cualquier forma de mantener mi viejo datepicker de propiedades
  3. 14

    También establecer el campo de movilidad cuando se deshabilita el datePicker de correo.g

    $("input").prop('disabled', true);

    Para detener la imagen que se puede hacer clic usted puede desenlazar haga clic en el evento en que

    $('img#<id or class ref>').unbind('click');
    • gracias, que ayudó a deshabilitar el campo. extraño que document.getElementsByName('from')[0].readOnly = 'readonly' no funcionó (desactivado ninguno), pero .la proposición como usted ha mencionado que funciona bien! Sin embargo, la imagen todavía se puede hacer clic y aparece el selector de fecha. Es allí una manera de gris de la imagen? Yo no sabía que el .prop-función….Soy bastante nuevo en jQuery. Sin embargo, la imagen todavía se puede hacer clic y abre el selector de fecha. Es allí una manera de gris es así?
    • sólo se podía separar el evento click sobre ella – .off ?
    • Traté de $("#from").off();, que se dice para eliminar todos los controladores de eventos, pero no diferencia
    • gracias por la edición de @Zakaria
  4. 4
    $("#nicIssuedDate").prop('disabled', true);

    Esto es que funciona 100% con bootstrap Datepicker

    • felicitaciones a escribir bootstrap Datepicker!
  5. 3

    También estoy teniendo Este Error!

    Entonces puedo cambiar este

    $("#from").datepicker('disable');

    a Este

    $("#from").datepicker("disable");

    error : las comillas dobles y simples..

    Ahora su Trabajo bien para mí..

  6. 3

    simplemente utilice el siguiente código

    $("#from").datepicker({
     showOn: "off"
    });

    no se mostrará la pantalla de selector de fecha

    • Simplemente rallar la respuesta…En mi caso no quiero desactivar mi selector de fecha debido a que utiliza su valor en la forma de presentar…además de safari y firefox no deja de consulta selector de fecha de mostrar como se hace en Chrome lo he encontrado esta respuesta es útil…gracias
    • Usted es la mayoría de la recepción 🙂
  7. 3
    $('#ElementID').unbind('focus');

    hizo el truco para mí !!

    • Una explicación de por qué funciona para usted que sería útil para el cartel.
  8. 1

    Esto es lo que ha funcionado para mí

    $("#from").attr("disabled", true);
    • Esto tiene algunas feo efectos secundarios: Si se intenta serializar el formulario los campos deshabilitados son ignorados.
  9. 1

    Tengo una sola página de la aplicación en nuestra intranet de la empresa donde ciertos campos de fecha de la necesidad de ser «bloqueado» bajo ciertas circunstancias. Los campos de fecha tienen un datepicker de unión.

    Haciendo los campos de sólo lectura no fue suficiente para bloquear los campos, como datepicker todavía se activa cuando el campo recibe el foco.

    Deshabilitar el campo (o deshabilitar datepicker) tienen efectos secundarios con serialize() o serializeArray().

    Una de las opciones era para separar datepicker de esos campos y hacer de ellos «normal» de los campos. Pero una solución más fácil es hacer que el campo (o campos) y de sólo lectura para evitar el datepicker de actuar cuando recibe el foco.

    $('#datefield').attr('readonly',true).datepicker("option", "showOn", "off");
  10. 1

    Datepicker se desactiva automáticamente cuando el campo de texto de entrada se hace discapacidad o readOnly:

    $j("#" + CSS.escape("${status.expression}")).datepicker({
        showOn: "both",
        buttonImageOnly: true,
        buttonImage: "<c:url value="/static/js/jquery/1.12.1/images/calendar.gif"/>",
        dateFormat: "yymmdd",
        beforeShow: function(o, o2) {
        var ret = $j("#" + CSS.escape("${status.expression}")).prop("disabled")
            || $j("#" + CSS.escape("${status.expression}")).prop("readOnly");
    
        if (ret){
            return false;
        }
    
        return o2;
    }
    });
    • El trabajo para mí, con más o menos modificaciones: cambio $j(«#» + CSS.de escape(«${estado.expresión}»)) a $(o).
  11. 1

    Esto funciona para mí en la alternancia activar y desactivar el datepicker de JQuery:

    if (condition) {
              $('#ElementID').datepicker(); //Enable datepicker                   
    } else {
             //Disable datepicker without the ability to enter any character on text input
              $('#ElementID').datepicker('destroy');
              $('#ElementID').attr('readonly', true); }

    No sé por qué, pero cuando uso habilitar/deshabilitar en datepicker de opciones, no se comportan de la manera que debe ser. Sólo funciona después de activar y desactivar, pero una vez que se desactive, no permitir de nuevo después de que, por lo que el código anterior funciona perfectamente bien para mí:

    if (condition) {
          $('#ElementID').datepicker('enable'); //Enable datepicker                   
    } else {
          //Disable datepicker but I cannot enable it again once it goes through this condition
          $('#ElementID').datepicker('disable');  }
  12. 0

    Bien puede quitar datepicker simplemente quitar hasDatepicker clase de entrada.

    Código

    $( "#from" ).removeClass('hasDatepicker')
  13. 0

    Este código se puede utilizar para alternar movilidad con jQuery Datepicker y con cualquier otro elemento de formulario también.

    JS:

    /***
      *This is the toggle disabled function Start
      *
      **/
    (function($) {
      $.fn.toggleDisabled = function() {
        return this.each(function() {
          this.disabled = !this.disabled;
          if ($(this).datepicker("option", "disabled")) {
            $(this).datepicker("option", "disabled", false);
          } else {
            $(this).datepicker("option", "disabled", true);
          }
    
        });
      };
    })(jQuery);
    
    /***
      *This is the toggle disabled function Start
      *Below is the implementation of the same
      **/
    
    $(".filtertype").click(function() {
      $(".filtertypeinput").toggleDisabled();
    });
    
    /***
      *Implementation end
      *
      **/
    
    $("#from").datepicker({
      showOn: "button",
      buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
      buttonImageOnly: true,
      buttonText: "Select date",
      defaultDate: "+1w",
      changeMonth: true,
      changeYear: true,
      numberOfMonths: 1,
      onClose: function(selectedDate) {
        $("#to").datepicker("option", "minDate", selectedDate);
      }
    });
    $("#to").datepicker({
      showOn: "button",
      buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif ",
      buttonImageOnly: true,
      buttonText: "Select date",
      defaultDate: "+1w",
      changeMonth: true,
      changeYear: true,
      numberOfMonths: 1,
      onClose: function(selectedDate) {
        $("#from").datepicker("option", "maxDate", selectedDate);
      }
    });

    HTML:

    <link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <form>
    <table>
    <tr>
    <th>
    <input class="filtertype" type="radio" name="filtertype" checked="checked" value="bydate">
    </th>
    <th>By Date</th>
    </tr>
    <tr>
    <td>
    <label>Form</label>
    <input class="filtertypeinput" id="from">
    </td>
    <td>
    <label>To</label>
    <input class="filtertypeinput" id="to">
    </td>
    </tr>
    <tr>
    <th>
    <input class="filtertype" type="radio" name="filtertype" value="byyear">
    </th>
    <th>By Year</th>
    </tr>
    <tr>
    <td colspan="2">
    <select class="filtertypeinput" disabled="disabled">
    <option value="">Please select</option>
    <option>test 1</option>
    <option>test 2</option>
    </select>
    </td>
    </tr>
    <tr>
    <th colspan="2">Report</th>
    </tr>
    <tr>
    <td colspan="2">
    <select id="report" name="report">
    <option value="">Please Select</option>
    <option value="Company">Company</option>
    <option value="MyExportAccount">MyExport Account</option>
    <option value="Sectors">Sectors</option>
    <option value="States">States</option>
    <option value="ExportStatus">Export Status</option>
    <option value="BusinessType">Business Type</option>
    <option value="MobileApp">Mobile App</option>
    <option value="Login">Login</option>
    </select>
    </td>
    </tr>
    </table>
    </form>

    • Por favor, considere incluir cierta información acerca de su respuesta, en lugar de simplemente publicar el código. Tratamos de ofrecer no sólo el ‘parches’, pero ayudar a la gente a aprender. Usted debe explicar lo que estaba mal en el código original, lo que hizo de manera diferente, y el por qué de su cambio(s) trabajado.
  14. 0

    El más votado solución no funciona para mí. He selectores de fecha predeterminado deshabilitado, el cual funciona correctamente. Cuando llega el momento de habilitar en el ventana.onload función, sin embargo, el $(«#award_start_date»).datepicker( ‘active’ ); sintaxis no habilitar los widgets. Yo era capaz de modificar el campo como si se tratara de un campo de entrada de texto, pero no el calendario selector.

    Lo que no funciona es este:

    if (x[i].id == "award_start_date") {
    $("#award_start_date").datepicker( {enabled: true} );
    }
    if (x[i].id == "award_end_date") {
    $("#award_end_date").datepicker( {enabled: true} );
    }

    Puede ser que esto simplemente recrea la datepickers, pero para mis propósitos, que está muy bien.

    Este es mi segundo día con jQuery interfaz de usuario de maravilla, así que puede ser que falten algunos de los puntos más finos…

  15. 0
       $("#datepicker").datepicker({
    dateFormat:'dd/M/yy',
    minDate: 'now',
    changeMonth:true,
    changeYear:true,
    showOn: "focus",
    //buttonImage: "YourImage",
    buttonImageOnly: true, 
    yearRange: "-100:+0",  
    }); 
    $( "#datepicker" ).datepicker( "option", "disabled", true ); //missing ID selector
  16. -1

    intente esto :

    $("#form").datetimepicker("disable");
    • Downvotes sin ningún tipo de comentarios son bastante inútiles
  17. -1

    Puede reemplazar campo de formulario con su copia:

    var copy = $('#from').clone();
    $('#from').replaceWith(copy);

    Y después de que inicializar datetimepicker de nuevo.

    • Creo que dejó de algunos comillas a continuación: var copia = $(‘#de’).clone(); $(‘#de’).replaceWith(copia);

Dejar respuesta

Please enter your comment!
Please enter your name here