web-dev-qa-db-ja.com

jQuery：日付ピッカーの有効化/無効化

私のphpファイルでは、jQuery Datepickerを使用します。

ファイルが読み込まれると、Datepickerを無効にして作成します。

次に、phpファイル（フォーム）の特別なフィールドがいっぱいになったら、Datepickerを有効にします。

したがって、最初は私のDatepickerは次のようになります。

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

これは今のところ問題なく動作します。問題は、フィールドを無効にするときに発生します。

特別なフィールドが入力されている場合、$("#from").datepicker('enable');を呼び出します

これも正常に機能しますが、言及した特別なフィールドが再び空になった場合は、再び無効にします。

次に$("#from").datepicker('disable');を使用すると、フィールド自体がグレー表示になりますが、フィールドを使用して値を入力できます。カレンダーがポップアップ表示され、ボックスの横のカレンダー画像もクリック可能です。

なぜこれが当てはまるのか誰にも分かりますか？何か不足していますか？

jquerydatepicker
39
A K

$("#from").datepicker('disable');は動作するはずですが、これを試すこともできます：

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

試してみる

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

また、datePickerを無効にするときにフィールドを無効に設定します。

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

クリック可能な画像を停止するには、そのクリックイベントのバインドを解除します

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

これはbootstrap Datepickerで100％動作します

4
Chinthaka Dinadasa

このエラーも発生しています！

次に、これを変更します

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

これに

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

間違い：一重引用符と二重引用符..

今、私にとってはうまくいきました..

3
sathya

次のコードを使用するだけです

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

日付ピッカーの表示は表示されません

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

私のためにトリックをしました！

3
ss_mj

これは私のために働いたものです

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

私の会社のイントラネットには、特定の状況下で特定の日付フィールドを「ブロック」する必要がある単一ページのアプリがあります。これらの日付フィールドにはdatepickerバインディングがあります。

フィールドを読み取り専用にするだけでは、フィールドをブロックするのに十分ではありませんでした。フィールドがフォーカスを受け取ったときにdatepickerが引き続きトリガーされるためです。

フィールドを無効にする（またはdatepickerを無効にする）と、serialize（）またはserializeArray（）による副作用があります。

オプションの1つは、これらのフィールドからdatepickerをアンバインドし、それらを「通常の」フィールドにすることでした。しかし、最も簡単な解決策の1つは、フィールドを読み取り専用にし、フォーカスを受け取ったときにdatepickerが動作しないようにすることです。

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

入力テキストフィールドが無効または読み取り専用にされると、Datepickerは自動的に無効になります。

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

これはJQueryのdatepickerの有効化と無効化の切り替えに役立ちます：

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

理由はわかりませんが、datepickerオプションでenable/disableを使用すると、本来の動作をしません。有効化および無効化した後にのみ機能しますが、無効化した後は再度有効化しないため、上記のコードは完全に正常に機能します。

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

このようなものを試してみてください

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

ありがとう

0
Narendra Solanki

このコードを使用して、jQuery Datepickerおよびその他のフォーム要素でも無効に切り替えることができます。

/***
  *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

最もよく投票されたソリューションは私にとってはうまくいきませんでした。デフォルトで無効になっている日付ピッカーがありますが、これは正常に機能します。 window.onload関数でそれらを有効にするときが来ましたが、$（ "＃award_start_date"）。datepicker（ 'enable'）;構文は有効になりませんでしたウィジェット。フィールドをテキスト入力フィールドであるかのように編集できましたが、カレンダーチューザーは取得できませんでした。

動作するのはこれです：

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

これは単に日付ピッカーを再作成するだけかもしれませんが、私の目的のためにはそれで問題ありません。

JQuery UIの素晴らしさを使用するのは2日目なので、細かい点をいくつか見逃しているかもしれません...

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

さて、入力からhasDatepickerクラスを削除するだけで、datepickerを削除できます。

コード

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