hide datepicker when dialog close jquery

Question

I am trying to hide the datepicker when i close the dialog

here is what i used

$("#dialog_edit_calendar").dialog({
    close: function () {
        $('#edit-calendar-form')[0].reset();
        $("#calendardate").datepicker("hide");
    }
});

I also tried

$("#calendardate").datepicker("remove");

but it fails !

here is my html

 <input class="required" maxlength="10" type="text" data-error-type="inline" name="calendardate"
                id="calendardate" onchange="showDaytoSelectedDate1()"/>

here is the example fiddle

my scenario is when i open dialog the datepicker should not open

I believe it's `destroy` instead, remove doesn't seem to be part of the API http://api.jqueryui.com/datepicker/#method-destroy (also hide is) — GillesC, Dec 10 '14 at 13:40
Can you give us some additional infos ? Your html-code perhaps ? — empiric, Dec 10 '14 at 13:40
I also used destroy but if i use that when i open my dialog again the datepicker is not opening — rp3220, Dec 10 '14 at 13:42
which version of jQuery UI are you using,,, i tried with 'hide' and i works in jsFiddle below.. — Dave, Dec 10 '14 at 13:57

score 1 · Accepted Answer · edited May 23 '17 at 11:50

1

Here is working jsFiddle .

    close: function () {
        $("#datepicker1").datepicker('hide'); // your datepicker ID ..
        $("#datepicker2").datepicker('hide'); // your datepicker ID ..
        ....
        .....
    }

UPDATE: to prevent focus on first input when jQuery UI modal is invoked. Here is the issue discussed with multiple solutions. Prevent jQuery UI dialog from setting focus to first textbox

Updated jsFiddle 2

 $("#dialog").dialog({

  ...
  open: function(){
      $('input:first').blur();
      $('#ui-datepicker-div').hide(); // required to hide datepicker container DIV immediately.
      $("#datepicker1").datepicker('hide'); // required to hide datepicker.
  }
  ...
  });

edited May 23 '17 at 11:50

Community

1
1

answered Dec 10 '14 at 13:54

Dave

4,376
3
24
37

http://jsfiddle.net/VytfY/229/ this is my scenario and thanks for your fiddle – rp3220 Dec 10 '14 at 14:16
1

@rp3220 here is your code updated http://jsfiddle.net/VytfY/230/ . i have added code in open:function(){ ... } of dialog – Dave Dec 10 '14 at 16:14
@rp3220 the problem is basically with focus set on first input element when dialog is opened.. here is issue discussed,, there are many solutions http://stackoverflow.com/questions/1202079/prevent-jquery-ui-dialog-from-setting-focus-to-first-textbox – Dave Dec 10 '14 at 16:16

score 0 · Answer 2 · answered Dec 10 '14 at 13:46

0

$("#calendardate").css('display', 'none');

or

$("#calendardate").attr('style', 'display: none;');

should work

answered Dec 10 '14 at 13:46

Danny Prager

67
3

thanks ! but Sorry thats hiding the input box i want to hide the datepicker not the input box – rp3220 Dec 10 '14 at 13:57
Do you want to hide it after selecting a date? or on custom requirements – Danny Prager Dec 10 '14 at 14:08
In that case use: $('#dialog_edit_calendar').dialog('close') – Danny Prager Dec 10 '14 at 14:56

score 0 · Answer 3 · answered Dec 10 '14 at 13:58

0

If you use hide you can even use other hiding effects effects.

$("#calendardate").hide();

demo

slide hide

answered Dec 10 '14 at 13:58

ilyes kooli

11,959
14
50
79

thanks ! but Sorry thats hiding the input box i want to hide the datepicker not the input box – rp3220 Dec 10 '14 at 14:26

score 0 · Answer 4 · answered Dec 11 '14 at 04:59

$("#dialog_edit_calendar").dialog({
open: function () {
    $('input:first').blur();
    $('#ui-datepicker-div').hide();
    $("#calendardate").datepicker("hide");
   }
});

@Dave gave me the answer

That to hide datepicker while i am opening dialog

hide datepicker when dialog close jquery

4 Answers4