web-dev-qa-db-fra.com

jQuery: activer/désactiver datepicker

Dans mon fichier php, je veux utiliser le Datepicker jQuery.

Lorsque mon fichier est chargé, je crée le Datepicker désactivé.

Ensuite, lorsqu'un champ spécial de mon fichier php (c'est un formulaire) est rempli, je souhaite activer le Datepicker.

Donc, initialement, Datepicker ressemble à ceci:

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

Cela fonctionne très bien, pas de problème jusqu'à présent. Le problème vient quand je veux désactiver le champ.

Si un champ spécial est rempli, j'appelle $("#from").datepicker('enable');

Cela fonctionne aussi très bien, MAIS maintenant je veux le désactiver à nouveau si le champ spécial que j'ai mentionné est vide à nouveau.

Ensuite, j'utilise $("#from").datepicker('disable'); et le champ lui-même est grisé, mais je peux toujours utiliser le champ pour entrer des valeurs, le calendrier s'affiche et même l'image de calendrier à côté de la zone est cliquable.

Quelqu'un a une idée pourquoi c'est le cas? Est-ce que je manque quelque chose?

jquerydatepicker
36
A K

$("#from").datepicker('disable'); devrait fonctionner, mais vous pouvez aussi essayer ceci:

$( "#from" ).datepicker( "option", "disabled", true );
58
koala_dev

essayer 

$("#from").datepicker().datepicker('disable');
14
Kanishka Panamaldeniya

Définissez également le champ sur Désactivé lorsque vous désactivez DatePicker, par exemple. 

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

Pour arrêter l’image cliquable, vous pouvez dissocier l’événement click sur celui-ci. 

$('img#<id or class ref>').unbind('click');
13
Shaun Hare
$("#nicIssuedDate").prop('disabled', true);

Cela fonctionne 100% avec bootstrap Datepicker

4
Chinthaka Dinadasa

Je vais aussi avoir cette erreur!

Puis je change cela

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

pour ça

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

erreur: guillemets simples et doubles ..

Maintenant, son travail me convient ..

3
sathya

utilisez simplement le code suivant

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

il ne montrera pas l'affichage de datepicker 

3
Arzon Barua
$('#ElementID').unbind('focus');

a fait le tour pour moi !!

2
ss_mj

C'est ce qui a fonctionné pour moi

$("#from").attr("disabled", true);
1
Zagor Te Nej

J'ai une application d'une seule page dans l'intranet de notre société où certains champs de date doivent être "bloqués" dans certaines circonstances. Ces champs de date ont un datepicker binding. 

Rendre les champs en lecture seule ne suffisait pas pour les bloquer, car datepicker se déclenche quand le champ reçoit le focus.

Désactiver le champ (ou désactiver datepicker ) a des effets secondaires avec serialize () ou serializeArray () .

Une des options était de dissocier datepicker de ces champs et de les transformer en champs "normaux". Mais une solution plus simple consiste à rendre le ou les champs en lecture seule et à éviter que le sélecteur de date n'agisse lorsqu'il reçoit le focus.

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

Essayez quelque chose comme ça ça va vous aider

$("#from").click(function () {
           $('#from').attr('readonly', true);
     });

Merci

0
Narendra Solanki

Vous pouvez utiliser ce code pour activer/désactiver Désactivé avec jQuery Datepicker et tout autre élément de formulaire.

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

0
Abhishek

Datepicker est désactivé automatiquement lorsque le champ de saisie est désactivé ou en lecture seule:

$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;
}
});
0
alexandrubarbat

La solution la plus votée ne fonctionnait pas pour moi. J'ai des sélecteurs de date avec défaut de désactivé, ce qui fonctionne bien. Quand vient le temps de les activer dans la fonction window.onload, le $ ("# award_start_date"). Datepicker ('enable'); La syntaxe n'active pas les widgets. J'ai pu modifier le champ comme s'il s'agissait d'un champ de saisie de texte, mais je n'ai pas eu le sélecteur de calendrier.

Qu'est-ce que le travail est ceci:

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

Il se peut que cela ne fasse que recréer les sélecteurs de dates, mais pour les besoins de mon propos, c'est très bien.

C’est mon deuxième jour d’exploitation de jQuery UI, je risque donc de manquer certains des points les plus subtils….

0
user2997577
   $("#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
0
Girish

Vous pouvez supprimer datepicker en supprimant simplement la classe hasDatepicker de l’entrée.

Code 

$( "#from" ).removeClass('hasDatepicker')
0
Dipesh Parmar

Cela fonctionne pour moi sur l'activation et la désactivation de 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); }

Je ne sais pas pourquoi mais lorsque j'utilise activer/désactiver dans les options de datepicker, il ne se comporte pas comme il se doit. Cela fonctionne seulement après que vous l'activiez et le désactiviez, mais une fois que vous le désactiviez, il ne le réactivait plus après, donc le code ci-dessus fonctionne parfaitement pour moi:

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');  }
0
Willy David Jr