Date picker is not showing

Question

Hi all,

 

my datepicker is not showing please help on that. 

 

below is my code.

 

$(".datepicker").datepicker({ format: 'dd/mm/yyyy', autoclose: true, todayBtn: 'linked' })

========================================

else if (currColumn == "CPDate") {

tr = tr + '<td><span> <input id="' + currColumn + '" type="text" class="datepicker"/></span></td>';

}

 

 

Answer 1

are you using code like below

 

$('.datepicker').on('focus', function () {

$(this).datepicker({ format: 'dd/mm/yyyy', autoclose: true, todayBtn: 'linked' })

});

 

Coz this is working fine for me.

 

Also check browser debugger for any error.  

Answer 2

Hi,

    First use the jquery reference in your page and then use my code. It is running fine in my computer system.

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
    $(document).ready(function () {

         $(".Cls").datepicker({
            dateFormat: "dd/mm/yy",
            changeMonth: true,
            changeYear: true,
            yearRange: "-100:+0",
        });
});
<input id="txtcal" type="text" class="Cls"/>

Answer 3

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>

$(document).ready(function () {

$('#<%=Txt_Fromdate.ClientID%>').datepicker({

defaultDate: "+1w",

changeMonth: true,

changeYear: true,

numberOfMonths: 2,

yearRange: "1900:+0",

showAnim: "slide",

dateFormat: "mm/dd/yy",

alt: "",

title: "",

onClose: function (selectedDate) {

$('#<%=Txt_Fromdate.ClientID%>').datepicker("option", "minDate", selectedDate);

}

});

$('#<%=Txt_Todate.ClientID%>').datepicker({

defaultDate: "+1w",

changeMonth: true,

changeYear: true,

numberOfMonths: 2,

yearRange: "1900:+0",

showAnim: "slide",

dateFormat: "mm/dd/yy",

alt: "",

title: "",

onClose: function (selectedDate) {

$('#<%=Txt_Todate.ClientID%>').datepicker("option", "maxdate", selectedDate);

}

});

});

function ValidateDate() {

var errorCount = 0;

var todate = $('#<%=Txt_Todate.ClientID%>').val();

if (todate == "") {

$('#<%=Txt_Todate.ClientID%>').css("border-color", "red");

$('#<%=lblselectfromdate.ClientID%>').html("*");

errorCount++;

}

else {

$('#<%=Txt_Todate.ClientID%>').css("border-color", "");

$('#<%=lblselectfromdate.ClientID%>').html("");

}

var fromdate = $('#<%=Txt_Fromdate.ClientID%>').val();

if (fromdate == "") {

$('#<%=Txt_Fromdate.ClientID%>').css("border-color", "red");

$('#<%=lblselecttodate.ClientID%>').html("*");

errorCount++;

}

else {

$('#<%=Txt_Fromdate.ClientID%>').css("border-color", "");

$('#<%=lblselecttodate.ClientID%>').html("");

}

if (errorCount > 0) {

return false;

}

else {

return true;

}

}

</script>

<table class="auto-style1">

<tr>

<td class="auto-style3">FROM DATE</td>

<td class="auto-style2">

<asp:TextBox ID="Txt_Fromdate" runat="server"></asp:TextBox>

<asp:Label ID="lblselectfromdate" runat="server" ForeColor="Red"></asp:Label>

</td>

<td class="auto-style4">TODATE</td>

<td>

<asp:TextBox ID="Txt_Todate" runat="server"> </asp:TextBox>

<asp:Label ID="lblselecttodate" runat="server" ForeColor="Red"></asp:Label>

</td>

<td>

<td class="auto-style3">

<asp:Button ID="Btn_submit" runat="server" Text="SUBMIT" CssClass="actionbutton" OnClick="Btn_submit_Click" OnClientClick="return ValidateDate();" /></td>

</tr>

USE ABOVE CODE  

 

 

Answer 4

i applied the code and showing datepicker but while clicking on date the textbox is not showing any date. ex: if click on 29 date  but it is not showing on textbox. plz help me.

 

 

 

Answer 5

Since you are adding dynamically , hence you need to tweak your code a bit. You need to bind datepicker on onFocus event of input box.

 

refer here

 

https://stackoverflow.com/questions/10433154/putting-datepicker-on-dynamically-created-elements-jquery-jqueryui 

Answer 6

<input style="color:black; font-weight: normal;" type="text" id=@colName value=@item[colName] class="edit-mode datepicker" /> for this case it is working fine but  tr = tr + '<td><span> <input id="' + currColumn + '" type="text" class="datepicker" value=""/></span></td>'; this case is not working here am displaying dynamically. plz help me on that.

Answer 7

Then you may not have put your jquery inside $(document).ready

Try this, it is working perfectly for me 

 

$(document).ready(function () {

$(".datepicker").datepicker({ format: 'dd/mm/yyyy', autoclose: true, todayBtn: 'linked' })

});

 

Answer 8

Hi Ankit,

I have already added that references. 

Answer 9

Hi Venkat,

 

You need to include following references for datepicker to work.

 

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/> 

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Include these and check if your issue is resolved or not