jQuery enabling disabling datepicker

Question

In my php-file  I want to use the jQuery Datepicker   When my file loads  I create the Datepicker disabled   Then  when a special field in my php-file  it is a form  is filled  I want to enable the Datepicker   So  initially my Datepicker looks like this       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               This works just fine  no problem so far  The problem comes  when I want to disable the field   If a special field is filled  I call     from   datepicker  enable     This also works fine  BUT now I want to disable it again if the special field I mentioned it empty again   Then I use     from   datepicker  disable    and the field itself is grayed  but I can still use the field to enter values  the calender pops up and even the calender-image next to the box is clickable   Anyone has an idea why this is the case  Am I missing something

User · Answer

For those who are using 2012-2013 versions  you can do this      from   datepicker  remove     Then to enable it back      from   datepicker  add     Here s the documentation

User · Answer

I have a single-page app in our company intranet where certain date fields need to be  blocked  under certain circumstances  Those date fields have a datepicker binding    Making the fields read-only wasn t enough to block the fields  as datepicker still triggers when the field receives focus   Disabling the field  or disabling datepicker  have side effects with serialize   or serializeArray     One of the options was to unbind datepicker from those fields and making them  normal  fields  But one easiest solution is to make the field  or fields  read-only and to avoid datepicker from acting when receive focus       datefield   attr  readonly  true  datepicker  option    showOn    off

User · Answer

from   datepicker  disable    should work  but you can also try this        from    datepicker   option    disabled   true

User · Answer

You can replace form field with its copy   var copy       from   clone         from   replaceWith copy    And after that initialize datetimepicker again

User · Answer

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

User · Answer

nicIssuedDate   prop  disabled   true     This is works 100  with bootstrap Datepicker

User · Answer

The most up-voted solution did not work for me  I have date pickers with default of disabled  which works fine  When it comes time to enable them in the window onload function  though  the     award start date   datepicker   enable     syntax did not enable the widgets  I was able to edit the field as if it were a text input field  but did not get the calendar chooser   What does work is this   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         It may be that this simply recreates the datepickers  but for my purposes  that is fine   This is my second day using jQuery UI awesomeness  so I may be missing some of the finer points

User · Answer

This works for me on toggling enable and disable datepicker of 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       I don t know why but when I use enable disable in datepicker options  it doesn t behave the way it should be  It only works after you enable and disable it  but once you disable it  it doesn t enable again after  so the code above works perfectly fine for me   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

User · Answer

I am also having This Error   Then i change this      from   datepicker  disable      to This      from   datepicker  disable      mistake   single and double quotes    Now its Work fine for me

User · Answer

try       from   datepicker   datepicker  disable

User · Answer

You can use this code to toggle disabled with jQuery Datepicker and with any other form element also    x000D   x000D       x000D     This is the toggle disabled function Start x000D      x000D        x000D   function      x000D      fn toggleDisabled   function     x000D      return this each function     x000D        this disabled    this disabled  x000D        if    this  datepicker  option    disabled      x000D            this  datepicker  option    disabled   false   x000D          else   x000D            this  datepicker  option    disabled   true   x000D          x000D   x000D          x000D       x000D     jQuery   x000D   x000D       x000D     This is the toggle disabled function Start x000D     Below is the implementation of the same x000D        x000D   x000D      filtertype   click function     x000D        filtertypeinput   toggleDisabled    x000D      x000D   x000D       x000D     Implementation end x000D      x000D        x000D   x000D      from   datepicker   x000D    showOn   button   x000D    buttonImage   http   jqueryui com resources demos datepicker images calendar gif   x000D    buttonImageOnly  true  x000D    buttonText   Select date   x000D    defaultDate    1w   x000D    changeMonth  true  x000D    changeYear  true  x000D    numberOfMonths  1  x000D    onClose  function selectedDate    x000D          to   datepicker  option    minDate   selectedDate   x000D      x000D      x000D      to   datepicker   x000D    showOn   button   x000D    buttonImage   http   jqueryui com resources demos datepicker images calendar gif    x000D    buttonImageOnly  true  x000D    buttonText   Select date   x000D    defaultDate    1w   x000D    changeMonth  true  x000D    changeYear  true  x000D    numberOfMonths  1  x000D    onClose  function selectedDate    x000D          from   datepicker  option    maxDate   selectedDate   x000D      x000D      x000D   lt link href    code jquery com ui 1 11 2 themes smoothness jquery-ui css  rel  stylesheet    gt  x000D   x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt script src    code jquery com ui 1 11 2 jquery-ui js  gt  lt  script gt  x000D   lt form gt  x000D     lt table gt  x000D       lt tr gt  x000D         lt th gt  x000D           lt input class  filtertype  type  radio  name  filtertype  checked  checked  value  bydate  gt  x000D         lt  th gt  x000D         lt th gt By Date lt  th gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt  x000D           lt label gt Form lt  label gt  x000D           lt input class  filtertypeinput  id  from  gt  x000D         lt  td gt  x000D         lt td gt  x000D           lt label gt To lt  label gt  x000D           lt input class  filtertypeinput  id  to  gt  x000D         lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt th gt  x000D           lt input class  filtertype  type  radio  name  filtertype  value  byyear  gt  x000D         lt  th gt  x000D         lt th gt By Year lt  th gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td colspan  2  gt  x000D           lt select class  filtertypeinput  disabled  disabled  gt  x000D             lt option value    gt Please select lt  option gt  x000D             lt option gt test 1 lt  option gt  x000D             lt option gt test 2 lt  option gt  x000D           lt  select gt  x000D         lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt th colspan  2  gt Report lt  th gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td colspan  2  gt  x000D           lt select id  report  name  report  gt  x000D             lt option value    gt Please Select lt  option gt  x000D             lt option value  Company  gt Company lt  option gt  x000D             lt option value  MyExportAccount  gt MyExport Account lt  option gt  x000D             lt option value  Sectors  gt Sectors lt  option gt  x000D             lt option value  States  gt States lt  option gt  x000D             lt option value  ExportStatus  gt Export Status lt  option gt  x000D             lt option value  BusinessType  gt Business Type lt  option gt  x000D             lt option value  MobileApp  gt Mobile App lt  option gt  x000D             lt option value  Login  gt Login lt  option gt  x000D           lt  select gt  x000D         lt  td gt  x000D       lt  tr gt  x000D     lt  table gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

Try something like this it will help you      from   click function                     from   attr  readonly   true              Thanks

User · Answer

This is what worked for me      from   attr  disabled   true

User · Answer

Well You can remove datepicker by simply remove hasDatepicker class from input   Code       from    removeClass  hasDatepicker

User · Answer

ElementID   unbind  focus      did the trick for me

User · Answer

Also set the field to disabled when you disable the datePicker e g            input   prop  disabled   true     To stop the image being clickable you could unbind the click event on that      img  lt id or class ref gt    unbind  click

User · Answer

try this             form   datetimepicker  disable

User · Answer

simply use the following code      from   datepicker    showOn   off        it will not show the display of datepicker

User · Answer

Datepicker is disabled automatically when the input text field is made disabled or readOnly    j       CSS escape    status expression     datepicker       showOn   both       buttonImageOnly  true      buttonImage    lt c url value   static js jquery 1 12 1 images calendar gif   gt        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

[jquery] jQuery: enabling/disabling datepicker

Examples related to jquery

Examples related to datepicker