0

There seems to be a problem with showing datepicker in modal dialog.

I'm using:

    $(".dpicker").datepicker({
        numberOfMonths: 2,
        dateFormat: 'd M yy',
        showButtonPanel: true
    });

to enable the datepicker on the given input field.

Please check the fiddle:

http://jsfiddle.net/ozjyu9k5/3/

It's working except while rendered in modal dialog.

Any suggestions to make the datepicker working in the dialog?

Please don't mark as duplicate as I searched the entire internet for a working solution and none of them seems to be working.

Improve this question

3 Answers 3

Reset to default
0

Why not use a popup like this one. You can see the full api here on the official API page.

It would look like this:

datepicker

When you click in the input field it will show you the dialog like this

datepicker open

Your code would be something like this:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>


</body>
</html>
Improve this answer
1
  • yes, but my problem is that displaying Jquery UI datepicker in a Jquery UI modal window doesn't work. Otherwise it's working.
    – Liviu valentyn
    Commented Apr 7, 2015 at 3:25
0

I was able to get the datepicker working in the fiddle by replacing your included jQuery UI JS and CSS files(External Resources) by the following:

//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css

//code.jquery.com/ui/1.11.4/jquery-ui.js

Improve this answer
-2

Try using JQuery UI datepicker. See below snippet (JsFiddle Demo):

HTML Code:

<p>HTML5 Date: <input type="date" placeholder="html5 date:" /></p>

<p><input id="Button1" type="button" value="Get DatePicker Value" title="Get DatePicker Value" /></p>

Script

// Insert placeholder as prefix in the value, when user makes a change.
$(".datepicker").datepicker({
    onSelect: function(arg) {
        $(this).val($(this).attr("placeholder") + arg);
    }
});

// Display value of datepicker
$("#Button1").click(function() {
    alert('call val(): {' + $("input").val() + '}');
});

Thanks,

~Chandan

Improve this answer
3
  • This is not what i wanted. I need to get it displayed in a modal dialog, otherwise it's quite easy. Check my fiddle, already did what you've done.
    – Liviu valentyn
    Commented Apr 1, 2015 at 11:09
  • @Liviuvalentyn or use Bootstrap to display datepicker inside modal, refer this link: codepen.io/Sinetheta/pen/Ftjwi
    – Chandan Prakash Sharma
    Commented Apr 1, 2015 at 11:21
  • I need to do it with jquery UI modal dialog and datepicker, not Bootstrap.
    – Liviu valentyn
    Commented Apr 1, 2015 at 16:44

Not the answer you're looking for? Browse other questions tagged or ask your own question.