web-dev-qa-db-de.com

jQuery: Aktivieren/Deaktivieren von Datepicker

Ich möchte in meiner PHP-Datei den jQuery Datepicker verwenden.

Wenn meine Datei geladen wird, erstelle ich den Datepicker deaktiviert.

Wenn dann ein spezielles Feld in meiner PHP-Datei (es ist ein Formular) gefüllt wird, möchte ich den Datepicker aktivieren.

So sieht mein Datepicker zunächst so aus:

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

Das funktioniert gut, bisher kein Problem. Das Problem tritt auf, wenn ich das Feld deaktivieren möchte.

Wenn ein spezielles Feld gefüllt ist, rufe ich $("#from").datepicker('enable'); auf.

Das funktioniert auch gut, ABER jetzt möchte ich es wieder deaktivieren, wenn ich das spezielle Feld leer erwähnte.

Dann verwende ich $("#from").datepicker('disable'); und das Feld selbst ist grau hinterlegt, aber ich kann das Feld trotzdem verwenden, um Werte einzugeben, der Kalender erscheint und sogar das Kalenderbild neben der Box ist anklickbar.

Hat jemand eine Idee, warum das so ist? Fehlt mir etwas?

36
A K

$("#from").datepicker('disable'); sollte funktionieren, aber Sie können dies auch versuchen:

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

versuchen 

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

Setzen Sie das Feld auch auf deaktiviert, wenn Sie den datePicker deaktivieren, z 

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

Um zu verhindern, dass das Bild anklickbar ist, können Sie das Klickereignis aufheben 

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

Das funktioniert 100% mit bootstrap Datepicker

4

Ich habe auch diesen Fehler!

Dann ändere ich das

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

zu diesem

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

fehler: einfache und doppelte Anführungszeichen.

Nun ist es gut für mich ..

3
sathya

verwenden Sie einfach den folgenden Code

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

die Datumsanzeige wird nicht angezeigt 

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

hat den Trick für mich gemacht !!

2
ss_mj

Das hat bei mir funktioniert

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

Ich habe eine einseitige Anwendung in unserem Firmenintranet, in der bestimmte Datumsfelder unter bestimmten Umständen "gesperrt" werden müssen. Diese Datumsfelder haben eine datepicker Bindung. 

Es war nicht ausreichend, die Felder schreibgeschützt zu machen, um die Felder zu blockieren, da datepicker immer noch ausgelöst wird, wenn das Feld den Fokus erhält.

Das Deaktivieren des Feldes (oder das Deaktivieren von datepicker ) hat Nebenwirkungen mit serialize () oder serializeArray () .

Eine der Optionen bestand darin, datepicker von diesen Feldern zu lösen und sie zu "normalen" Feldern zu machen. Eine einfachste Lösung besteht jedoch darin, das Feld (oder die Felder) schreibgeschützt zu machen und zu verhindern, dass Datumsanzeige beim Fokus wirksam wird.

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

Versuchen Sie so etwas wie es Ihnen helfen wird

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

Vielen Dank

0

Sie können diesen Code verwenden, um mit jQuery Datepicker und mit allen anderen Formularelementen deaktiviert zu werden.

/***
  *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 wird automatisch deaktiviert, wenn das Eingabetextfeld deaktiviert wird oder 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;
}
});
0
alexandrubarbat

Die am meisten gewählte Lösung hat bei mir nicht funktioniert. Ich habe Datumsauswahl mit standardmäßig deaktiviert, was gut funktioniert. Wenn es jedoch Zeit ist, sie in der Funktion window.onload zu aktivieren, wird $ ("# award_start_date"). Die Syntax hat die Widgets nicht aktiviert. Ich konnte das Feld so bearbeiten, als wäre es ein Texteingabefeld, aber der Kalender wurde nicht angezeigt.

Was funktioniert, ist folgendes:

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

Es kann sein, dass dies die Datepicker einfach neu erstellt, aber für meine Zwecke ist das in Ordnung.

Dies ist mein zweiter Tag mit jQuery UI Awesomeness, so dass ich vielleicht einige der Feinheiten vermisse ...

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

Sie können datepicker entfernen, indem Sie einfach die Klasse hasDatepicker aus der Eingabe entfernen.

Code

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

Dies funktioniert für mich beim Aktivieren/Deaktivieren von Datumsauswahl von 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); }

Ich weiß nicht warum, aber wenn ich enable/disable in Datepicker-Optionen verwende, verhält es sich nicht so, wie es sein sollte. Es funktioniert nur, nachdem Sie es aktiviert und deaktiviert haben, aber sobald Sie es deaktivieren, wird es nach dem Deaktivieren nicht erneut aktiviert.

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