JQuery: включение/отключение datepicker

В моем 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');, и само поле серого цвета, но я все еще могу использовать поле для ввода значений, каландр всплывает и даже изображение календаря рядом с полем можно щелкнуть.

У кого-нибудь есть идея, почему это так? Я что-то пропустил?

Ответы

Ответ 1

$("#from").datepicker('disable'); должен работать, но вы также можете попробовать следующее:

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

Ответ 2

попробуйте

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

Ответ 3

Также отключите поле, когда вы отключите функцию datePicker, например

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

Чтобы остановить клики, вы можете отменить событие click на этом

$('img#<id or class ref>').unbind('click');

Ответ 4

$("#nicIssuedDate").prop('disabled', true);

Это работает 100% с бутстрапом Datepicker

Ответ 5

У меня также есть эта ошибка!

Затем я меняю этот

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

to this

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

ошибка: одиночные и двойные кавычки.

Теперь его работа прекрасна для меня..

Ответ 6

просто используйте следующий код

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

он не покажет отображение datepicker

Ответ 7

$('#ElementID').unbind('focus');

сделал трюк для меня!!

Ответ 8

Это то, что сработало для меня

$("#from").attr("disabled", true);

Ответ 9

У меня есть одностраничное приложение в нашей корпоративной интрасети, где определенные поля данных должны быть "заблокированы" при определенных обстоятельствах. Эти поля даты имеют привязку datepicker.

Создание полей только для чтения было недостаточным для блокировки полей, поскольку датапикер все еще запускается, когда поле получает фокус.

Отключение поля (или отключение datepicker) имеет побочные эффекты с serialize() или serializeArray().

Одним из вариантов было отвязать datepicker из этих полей и сделать их "нормальными" полями. Но одно простое решение - сделать поле (или поля) доступным только для чтения и не позволять datepicker действовать при получении фокуса.

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

Ответ 10

Ну, вы можете удалить datepicker, просто удалив hasDatepicker класс из ввода.

код

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

Ответ 11

Вы можете использовать этот код для переключения с помощью 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>

Ответ 12

Самое передовое решение для меня не сработало. У меня есть сборщики дат с отключенным по умолчанию, который отлично работает. Когда приходит время включить их в функцию 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} );
}

Возможно, это просто воссоздает datepickers, но для моих целей это нормально.

Это мой второй день с использованием jQuery UI awesomeness, поэтому я могу пропустить некоторые из более тонких точек...

Ответ 13

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

Ответ 14

попробуйте следующее:

$("#form").datetimepicker("disable");

Ответ 15

Вы можете заменить поле формы своей копией:

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

И после этого снова инициализируйте datetimepicker.