I have integrated a calendar control from the internet for phone use, where users can scroll up and down to select a date and time before clicking 'Confirm' or 'Cancel'. However, I am not familiar with JavaScript. The relevant JavaScript code in my view is as follows:
...
<li id="dateconfirm">Confirm</li>'
...
function bindButton(){
resetIndex();
$("#dateconfirm").unbind('click').click(function () {
var datestr = $("#yearwrapper ul li:eq("+indexY+")").html().substr(0,$("#yearwrapper ul li:eq("+indexY+")").html().length-1)+"-"+
$("#monthwrapper ul li:eq("+indexM+")").html().substr(0,$("#monthwrapper ul li:eq("+indexM+")").html().length-1)+"-"+
$("#daywrapper ul li:eq("+Math.round(indexD)+")").html().substr(0,$("#daywrapper ul li:eq("+Math.round(indexD)+")").html().length-1);
if(datetime){
if(Math.round(indexS)===1){//afternoon
$("#Hourwrapper ul li:eq("+indexH+")").html(parseInt($("#Hourwrapper ul li:eq("+indexH+")").html().substr(0,$("#Hourwrapper ul li:eq("+indexH+")").html().length-1))+12)
}else{
$("#Hourwrapper ul li:eq("+indexH+")").html(parseInt($("#Hourwrapper ul li:eq("+indexH+")").html().substr(0,$("#Hourwrapper ul li:eq("+indexH+")").html().length-1)))
}
datestr+=" "+$("#Hourwrapper ul li:eq("+indexH+")").html().substr(0,$("#Minutewrapper ul li:eq("+indexH+")").html().length-1)+":"+
$("#Minutewrapper ul li:eq("+indexI+")").html().substr(0,$("#Minutewrapper ul li:eq("+indexI+")").html().length-1);
indexS=0;
}
if(Ycallback===undefined){
if(docType){that.val(datestr);}else{that.html(datestr);}
}else{
Ycallback(datestr);
}
$("#datePage").hide();
$("#dateshadow").hide();
});
$("#datecancle").click(function () {
$("#datePage").hide();
$("#dateshadow").hide();
Ncallback(false);
});
}
When the textbox gains focus, it triggers a pop-up calendar. Originally, its HTML was as follows:
$(function(){
$('#Time').date({theme:"datetime"});
});
<div>Date Set:<input id="Time"/></div>
To convert it from HTML to ASPX, I made some modifications:
$(function () {
$("#<%= txtDate.ClientID %>").date({ theme: "datetime" });
});
<asp:TextBox ID="txtDate" runat="server" BorderWidth="0" OnTextChanged="txtDate_TextChanged" AutoPostBack="true" Font-Size="20" placeholder="Select Date"/>
Although the text on the textbox changes accordingly when I select a date/time and click 'Confirm', the OnTextChanged event does not trigger. Can someone help me understand why this is happening? Thanks.