Here I wrote about popup Calendar and how to find html contrl at server side( In C#).
1. Download ts_picker.js from here.
2. Create ASPX page with name 'Calendar.aspx'.
3. New Just copy and paste aspx and C# to your page from here.
4. Make sure you script path is correct.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Calendar.aspx.cs" Inherits="Programfiles_Access_Calendar" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Popup date picker</title>
<script src="../../Resources/JSFiles/ts_picker.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" name="txtFromDate" id="txtFromDate" runat="server" maxlength="10"
size="8" readonly="readonly" />
<a href="javascript:show_calendar('document.form1.txtFromDate',document.form1.txtFromDate.value);">
<img src="../../Resources/JSFiles/cal.gif" width="20" height="18" border="0" align="middle"
alt="click here to pick the date" /></a>
<br />
<asp:Button ID="btnAlert" runat="server" Text="Alert Date" OnClick="btnAlert_Click" />
</div>
</form>
</body>
</html>
---------- C# ------------------
protected void btnAlert_Click(object sender, EventArgs e)
{
string strResult = "", strFromDate = "";
HtmlInputText txtFromDate = (HtmlInputText)this.FindControl("txtFromDate");
string[] splitFromString = new string[] { "-", " " }; // Remove only - and space.
//string[] splitFromString = new string[] { "-"}; // Remove only -.
string[] splitFromDate = txtFromDate.Value.Split(splitFromString, StringSplitOptions.None);
if (Convert.ToInt32(splitFromDate[1].ToString()) < 10)
splitFromDate[1] = "0" + splitFromDate[1].ToString();
if (Convert.ToInt32(splitFromDate[0].ToString()) < 10)
splitFromDate[0] = "0" + splitFromDate[0].ToString();
strFromDate = splitFromDate[2].ToString() + "-" + splitFromDate[1].ToString() + "-" + splitFromDate[0].ToString();
Response.Write("<script>alert('" + Convert.ToString(strFromDate) + "');</script>");// YYYY-DD-MM.
}
NOTE::
* When you get downloaded zip file extract that and copy all files to your project. here when you click on Calendar icon then there will be a pop up Calendar open.
there you can click on any date and that will be shown to textbox. there will date with time if you want only date then you can make changes to js file.
there is "// print calendar footer" comment, you can chagne old code to this as below.
// print calendar footer
str_buffer +=
"<form name=\"cal\">\n<tr><td colspan=\"7\" bgcolor=\"#87CEFA\">"+
"<font color=\"White\" face=\"tahoma, verdana\" size=\"2\">"+
//"Time: <input type=\"text\" name=\"time\" value=\""+dt2tmstr(dt_datetime)+ "\" size=\"8\" maxlength=\"8\"></font></td></tr>\n</form>\n" +
"Time: <input type=\"text\" name=\"time\" value=\"\" size=\"8\" maxlength=\"8\"></font></td></tr>\n</form>\n" +
"</table>\n" +
"</tr>\n</td>\n</table>\n" +
"</body>\n" +
"</html>\n";
Now your code work fine.
Cheers!!
1. Download ts_picker.js from here.
2. Create ASPX page with name 'Calendar.aspx'.
3. New Just copy and paste aspx and C# to your page from here.
4. Make sure you script path is correct.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Calendar.aspx.cs" Inherits="Programfiles_Access_Calendar" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Popup date picker</title>
<script src="../../Resources/JSFiles/ts_picker.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" name="txtFromDate" id="txtFromDate" runat="server" maxlength="10"
size="8" readonly="readonly" />
<a href="javascript:show_calendar('document.form1.txtFromDate',document.form1.txtFromDate.value);">
<img src="../../Resources/JSFiles/cal.gif" width="20" height="18" border="0" align="middle"
alt="click here to pick the date" /></a>
<br />
<asp:Button ID="btnAlert" runat="server" Text="Alert Date" OnClick="btnAlert_Click" />
</div>
</form>
</body>
</html>
---------- C# ------------------
protected void btnAlert_Click(object sender, EventArgs e)
{
string strResult = "", strFromDate = "";
HtmlInputText txtFromDate = (HtmlInputText)this.FindControl("txtFromDate");
string[] splitFromString = new string[] { "-", " " }; // Remove only - and space.
//string[] splitFromString = new string[] { "-"}; // Remove only -.
string[] splitFromDate = txtFromDate.Value.Split(splitFromString, StringSplitOptions.None);
if (Convert.ToInt32(splitFromDate[1].ToString()) < 10)
splitFromDate[1] = "0" + splitFromDate[1].ToString();
if (Convert.ToInt32(splitFromDate[0].ToString()) < 10)
splitFromDate[0] = "0" + splitFromDate[0].ToString();
strFromDate = splitFromDate[2].ToString() + "-" + splitFromDate[1].ToString() + "-" + splitFromDate[0].ToString();
Response.Write("<script>alert('" + Convert.ToString(strFromDate) + "');</script>");// YYYY-DD-MM.
}
NOTE::
* When you get downloaded zip file extract that and copy all files to your project. here when you click on Calendar icon then there will be a pop up Calendar open.
there you can click on any date and that will be shown to textbox. there will date with time if you want only date then you can make changes to js file.
there is "// print calendar footer" comment, you can chagne old code to this as below.
// print calendar footer
str_buffer +=
"<form name=\"cal\">\n<tr><td colspan=\"7\" bgcolor=\"#87CEFA\">"+
"<font color=\"White\" face=\"tahoma, verdana\" size=\"2\">"+
//"Time: <input type=\"text\" name=\"time\" value=\""+dt2tmstr(dt_datetime)+ "\" size=\"8\" maxlength=\"8\"></font></td></tr>\n</form>\n" +
"Time: <input type=\"text\" name=\"time\" value=\"\" size=\"8\" maxlength=\"8\"></font></td></tr>\n</form>\n" +
"</table>\n" +
"</tr>\n</td>\n</table>\n" +
"</body>\n" +
"</html>\n";
Now your code work fine.
Cheers!!
No comments:
Post a Comment