Jquery Datepicker not displayed on first click

Question

Jquery Datepicker not displayed on first click

4.3k views Asked by Dipendra Shekhawat At 17 June 2015 at 09:23

I am using JQueryUI datepicker, when clicking on the calendar image for the first time the calendar is not shown. However, when a postback occurs then the calender is displayed.

I am using the below is the code snippet to initialize datepicker:

$(function() {
      var date = new Date();
      var currentMonth = date.getMonth();
      var currentDate = date.getDate();
      var currentYear = date.getFullYear();

      $("#ReportDate").datepicker({
        showOn: "both",
        buttonImage: "calendar.png",
        buttonImageOnly: true,
        buttonText: "Select date",
        maxDate: new Date(currentYear, currentMonth, currentDate)
      });
   });

  .ui-datepicker {
            font-size: 8pt !important;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

</head>

<body>
<form id="form1" runat="server">
<div class="demo">
<b>Date:</b> <input type="text" id="ReportDate" />
</div>
</form>
</body>
</html>

Can any one please help. I am really stuck from long time.

Original Q&A

There are 3 answers

**Kunal Patel** · Answer 1 · 2015-06-17 10:01:47

Kunal Patel On 17 June 2015 at 10:01

I think mistake in your script tag

i have update your code Here

check this link and let me know it's working or not.

**DDan** · Answer 2 · 2015-06-17 09:27:38

Are you initializing your datepicker on pageload?

<script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
</script>

EDIT

Probably the references are wrong. Try this: https://jsfiddle.net/ddan/8vjtzru4/1/

**Vineeta Mehta** · Answer 3 · 2015-06-17 09:38:09

As pe rmy understanding, This problem usually occurs when the input field is the first input of the page and is already focused state when dom initializes.So we need to click the field once more to initialize focus and datepicker. so better initialize datepicker on click function.

$('#datepicker').click(function(){
    $('#datepicker').datepicker('show');
});

offcouse fiddle or plunker demo of question will help more with answers.

TechQA.

Jquery Datepicker not displayed on first click

There are 3 answers

Related Questions in JQUERY

Related Questions in DATEPICKER

Related Questions in JQUERY-UI-DATEPICKER

Popular Questions

Popular Tags

Trending Questions