Custom Date Format using J Query
File->New->Website
First download the following JQuery files
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js
https://www.coderesort.com/p/epicode/browser/Geta.Tags/Geta/Tags/Resources/jquery-ui-1.8.16.custom.css?rev=2107
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css
DataBase Design
Create a Class
Class1.cs
Add the namespace
using System.Web;
using System.Globalization;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Globalization;
/// <summary>
/// Summary description for Class1
/// </summary>
public class Class1
{
// to Convert Custom dateformat to system dateformat we are using this DateFormat
public static string DateFormat
{
get
{
DateFormatCo obj = new DateFormatCo();
string date = string.Empty;
if (obj .dateformat!= null)
{
date = obj.dateformat;
}
else
{
date = "yyyy-MM-dd";
}
return date;
}
}
// convert custom dateformat to system dateformat
public static DateTime CultureDate(string val)
{
CultureInfo culture = CultureInfo.CurrentCulture;
DateTime cultureDate = DateTime.ParseExact(val, DateFormat, culture);
return cultureDate;
}
}
DateFormatCo.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
/// <summary>
/// Summary description for DateFormatCo
/// </summary>
public class DateFormatCo
{
public string dateformat { get; set; }
public string userid { get; set; }
}
Add a New Page with Name as RegistrationDetails.aspx
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="FIRST NAME"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="LAST NAME"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label3" runat="server" Text="ADDRESS"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label5" runat="server" Text="User Defined Format"></asp:Label>
</td>
<td>
<asp:DropDownList ID="dateFormat" runat="server" CssClass="Dropdown" Width="150%">
<asp:ListItem value="MM-dd-yyyy" Text="MM-DD-YYYY"></asp:ListItem>
<asp:ListItem value="MM-yyyy-dd" Text="MM-YYYY-DD"></asp:ListItem>
<asp:ListItem value="yyyy-MM-dd" Text="YYYY-MM-DD"></asp:ListItem>
<asp:ListItem value="yyyy-dd-MM" Text="YYYY-DD-MM"></asp:ListItem>
<asp:ListItem value="dd-MM-yyyy" Text="DD-MM-YYYY"></asp:ListItem>
<asp:ListItem value="dd.yyyy.MM" Text="DD.YYYY.MM"></asp:ListItem>
<asp:ListItem value="MM.dd.yyyy" Text="MM.DD.YYYY"></asp:ListItem>
<asp:ListItem value="MM.yyyy.dd" Text="MM.YYYY.DD"></asp:ListItem>
<asp:ListItem value="yyyy.MM.dd" Text="YYYY.MM.DD"></asp:ListItem>
<asp:ListItem value="yyyy.dd.MM" Text="YYYY.DD.MM"></asp:ListItem>
<asp:ListItem value="dd/MM/yyyy" Text="DD/MM/YYYY"></asp:ListItem>
<asp:ListItem value="dd/yyyy/MM" Text="DD/YYYY/MM"></asp:ListItem>
<asp:ListItem value="MM/dd/yyyy" Text="MM/DD/YYYY" Selected="True"></asp:ListItem>
<asp:ListItem value="MM/yyyy/dd" Text="MM/YYYY/DD"></asp:ListItem>
<asp:ListItem value="yyyy/MM/dd" Text="YYYY/MM/DD"></asp:ListItem>
<asp:ListItem value="yyyy/dd/MM" Text="YYYY/DD/MM"></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label8" runat="server" Text="InputDateFormat"></asp:Label>
</td>
<td>
<select id="format">
<option value="mm/dd/yy">Default - mm/dd/yy</option>
<option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
</select>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label4" runat="server" Text="Input DOB"></asp:Label>
</td>
<td>
<asp:TextBox ID="datepicker" runat="server" ></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label6" runat="server" Text="User Id"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label7" runat="server" Text="PassWord"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox6" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</td>
</tr>
</table>
</div>
</form>
</body>
RegistrationDetails.aspx.cs
using System.Web.UI.WebControls;
using System.Data.SqlClient;
public partial class afterlogindatedisplay : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection("user id=sa;password=uday; database=uday;data source=localhost");
con.Open();
string datetime = Convert.ToString(Class1.CultureDate(Context.Request["datepicker"]).ToShortDateString());
SqlCommand cmd = new SqlCommand("insert into regsiterationdetails(fname,lname,address,dateformat,dob) values('" + TextBox1.Text + "','" + TextBox2.Text + "','" + TextBox3.Text + "','" + dateFormat.Text + "','" + datepicker.Text + "')",con);
SqlCommand cmd1 = new SqlCommand("insert into logindetails(userid,password) values('" + TextBox5.Text + "','" + TextBox6.Text + "')", con);
int i = cmd.ExecuteNonQuery();
int i1 = cmd1.ExecuteNonQuery();
if ((i > 0)&&(i1>0))
{
Response.Redirect("login.aspx");
}
con.Close();
}
}
First download the following JQuery files
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js
https://www.coderesort.com/p/epicode/browser/Geta.Tags/Geta/Tags/Resources/jquery-ui-1.8.16.custom.css?rev=2107
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css
DataBase Design
Create a Class
Class1.cs
Add the namespace
using System.Web;
using System.Globalization;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Globalization;
/// <summary>
/// Summary description for Class1
/// </summary>
public class Class1
{
// to Convert Custom dateformat to system dateformat we are using this DateFormat
public static string DateFormat
{
get
{
DateFormatCo obj = new DateFormatCo();
string date = string.Empty;
if (obj .dateformat!= null)
{
date = obj.dateformat;
}
else
{
date = "yyyy-MM-dd";
}
return date;
}
}
// convert custom dateformat to system dateformat
public static DateTime CultureDate(string val)
{
CultureInfo culture = CultureInfo.CurrentCulture;
DateTime cultureDate = DateTime.ParseExact(val, DateFormat, culture);
return cultureDate;
}
}
DateFormatCo.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
/// <summary>
/// Summary description for DateFormatCo
/// </summary>
public class DateFormatCo
{
public string dateformat { get; set; }
public string userid { get; set; }
}
Add a New Page with Name as RegistrationDetails.aspx
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="FIRST NAME"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="LAST NAME"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label3" runat="server" Text="ADDRESS"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label5" runat="server" Text="User Defined Format"></asp:Label>
</td>
<td>
<asp:DropDownList ID="dateFormat" runat="server" CssClass="Dropdown" Width="150%">
<asp:ListItem value="MM-dd-yyyy" Text="MM-DD-YYYY"></asp:ListItem>
<asp:ListItem value="MM-yyyy-dd" Text="MM-YYYY-DD"></asp:ListItem>
<asp:ListItem value="yyyy-MM-dd" Text="YYYY-MM-DD"></asp:ListItem>
<asp:ListItem value="yyyy-dd-MM" Text="YYYY-DD-MM"></asp:ListItem>
<asp:ListItem value="dd-MM-yyyy" Text="DD-MM-YYYY"></asp:ListItem>
<asp:ListItem value="dd.yyyy.MM" Text="DD.YYYY.MM"></asp:ListItem>
<asp:ListItem value="MM.dd.yyyy" Text="MM.DD.YYYY"></asp:ListItem>
<asp:ListItem value="MM.yyyy.dd" Text="MM.YYYY.DD"></asp:ListItem>
<asp:ListItem value="yyyy.MM.dd" Text="YYYY.MM.DD"></asp:ListItem>
<asp:ListItem value="yyyy.dd.MM" Text="YYYY.DD.MM"></asp:ListItem>
<asp:ListItem value="dd/MM/yyyy" Text="DD/MM/YYYY"></asp:ListItem>
<asp:ListItem value="dd/yyyy/MM" Text="DD/YYYY/MM"></asp:ListItem>
<asp:ListItem value="MM/dd/yyyy" Text="MM/DD/YYYY" Selected="True"></asp:ListItem>
<asp:ListItem value="MM/yyyy/dd" Text="MM/YYYY/DD"></asp:ListItem>
<asp:ListItem value="yyyy/MM/dd" Text="YYYY/MM/DD"></asp:ListItem>
<asp:ListItem value="yyyy/dd/MM" Text="YYYY/DD/MM"></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label8" runat="server" Text="InputDateFormat"></asp:Label>
</td>
<td>
<select id="format">
<option value="mm/dd/yy">Default - mm/dd/yy</option>
<option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
</select>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label4" runat="server" Text="Input DOB"></asp:Label>
</td>
<td>
<asp:TextBox ID="datepicker" runat="server" ></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label6" runat="server" Text="User Id"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label7" runat="server" Text="PassWord"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox6" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</td>
</tr>
</table>
</div>
</form>
</body>
RegistrationDetails.aspx.cs
using System.Web.UI.WebControls;
using System.Data.SqlClient;
public partial class afterlogindatedisplay : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection("user id=sa;password=uday; database=uday;data source=localhost");
con.Open();
string datetime = Convert.ToString(Class1.CultureDate(Context.Request["datepicker"]).ToShortDateString());
SqlCommand cmd = new SqlCommand("insert into regsiterationdetails(fname,lname,address,dateformat,dob) values('" + TextBox1.Text + "','" + TextBox2.Text + "','" + TextBox3.Text + "','" + dateFormat.Text + "','" + datepicker.Text + "')",con);
SqlCommand cmd1 = new SqlCommand("insert into logindetails(userid,password) values('" + TextBox5.Text + "','" + TextBox6.Text + "')", con);
int i = cmd.ExecuteNonQuery();
int i1 = cmd1.ExecuteNonQuery();
if ((i > 0)&&(i1>0))
{
Response.Redirect("login.aspx");
}
con.Close();
}
}
The details are registered successfully.
login.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="UserName"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="PassWord"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" TextMode="Password"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="Button1" runat="server" Text="Login" onclick="Button1_Click" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
login.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
public partial class login : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection("user id=sa;password=uday; database=uday;data source=localhost");
con.Open();
SqlCommand cmd = new SqlCommand("select loginid from logindetails where userid='"+TextBox1.Text +"'and password='"+TextBox2.Text+"'", con);
SqlDataReader dr;
int no;
dr = cmd.ExecuteReader();
while (dr.Read())
{
no = Convert.ToInt32(dr[0]);
Context.Session["no"]=no;
}
con.Close();
int regno = Convert.ToInt16(Context.Session["no"]);
SqlDataAdapter da1 = new SqlDataAdapter("select * from regsiterationdetails where regid=" + regno, con);
DataSet ds = new DataSet();
da1.Fill(ds);
Context.Session["DefaultFormats"] = ds;
Response.Redirect("dateformatpage.aspx");
}
}
dateformatpage.aspx
Add the following jquery files which u have download
Create a new folder with name JQuery.
and paste those files in JQuery folder of ur website.
Copy any Calender.gif image file from google and paste in JQuery folder
and now go to datepicker.js
and change the following buttonImage property.
buttonImage: path of the image
<link rel="Stylesheet" href="JQuery/jquery-ui-1.8.16.custom.css" type="text/css"/>
<script type="text/javascript" src="JQuery/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="JQuery/jquery.ui.core.js"></script>
dateformat.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="JQuery/jquery-1.6.2.js">
</script>
<link rel="Stylesheet" href="JQuery/jquery-ui-1.8.16.custom.css" type="text/css"/>
<script type="text/javascript" src="JQuery/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="JQuery/jquery.ui.core.js"></script>
<script type="text/javascript" language="javascript">
$(function () {
var dates = $("#dob").datepicker({
dateFormat: '<%= Context.Session["DatePickerFormat"] %>',
minDate: -0
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
<asp:Label ID="ename" runat="server" Text="fname"></asp:Label>
</td>
<td>
<asp:TextBox ID="fname" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="lname"></asp:Label>
</td>
<td>
<asp:TextBox ID="lname" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label3" runat="server" Text="address"></asp:Label>
</td>
<td>
<asp:TextBox ID="address" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="dob"></asp:Label>
</td>
<td>
<input type="text" id="dob" name="dateFormat2" runat="Server" class="TextBox" style="Width:100px" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
dateformat.aspx.cs
using System.Web.UI;
using System.Data;
using System.Web.UI.WebControls;
public partial class dateformatpage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Context.Session["DefaultFormats"] != null)
{
DataSet ds = (DataSet)Context.Session["DefaultFormats"];
DataTable dt = new DataTable();
dt = ds.Tables[0];
string dob = string.Empty;
string dateformat = string.Empty;
string firstname=string.Empty;
string lastname=string.Empty;
string address=string.Empty;
foreach (DataRow dr in dt.Rows)
{
dateformat = dr[3].ToString();
dob = dr[4].ToString();
firstname=dr[0].ToString();
lastname=dr[1].ToString();
address=dr[2].ToString();
Context.Session["DatePickerFormat"] = dob;
}
string selectformat= Convert.ToString(Context.Session["DatePickerFormat"]);
this.dob.Value = Convert.ToDateTime(selectformat).ToString(dateformat);
this.fname.Text = Convert.ToString(firstname);
this.lname.Text = Convert.ToString(lastname);
this.address.Text = Convert.ToString(address);
}
}
}
output
Note :Please Select Input Date Format as ISO 8601 - yy-mm-dd bec the above code has been written based on that format.
LoginPage
login.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="UserName"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="PassWord"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" TextMode="Password"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="Button1" runat="server" Text="Login" onclick="Button1_Click" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
login.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
public partial class login : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection("user id=sa;password=uday; database=uday;data source=localhost");
con.Open();
SqlCommand cmd = new SqlCommand("select loginid from logindetails where userid='"+TextBox1.Text +"'and password='"+TextBox2.Text+"'", con);
SqlDataReader dr;
int no;
dr = cmd.ExecuteReader();
while (dr.Read())
{
no = Convert.ToInt32(dr[0]);
Context.Session["no"]=no;
}
con.Close();
int regno = Convert.ToInt16(Context.Session["no"]);
SqlDataAdapter da1 = new SqlDataAdapter("select * from regsiterationdetails where regid=" + regno, con);
DataSet ds = new DataSet();
da1.Fill(ds);
Context.Session["DefaultFormats"] = ds;
Response.Redirect("dateformatpage.aspx");
}
}
dateformatpage.aspx
Add the following jquery files which u have download
Create a new folder with name JQuery.
and paste those files in JQuery folder of ur website.
Copy any Calender.gif image file from google and paste in JQuery folder
and now go to datepicker.js
and change the following buttonImage property.
buttonImage: path of the image
<link rel="Stylesheet" href="JQuery/jquery-ui-1.8.16.custom.css" type="text/css"/>
<script type="text/javascript" src="JQuery/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="JQuery/jquery.ui.core.js"></script>
dateformat.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="JQuery/jquery-1.6.2.js">
</script>
<link rel="Stylesheet" href="JQuery/jquery-ui-1.8.16.custom.css" type="text/css"/>
<script type="text/javascript" src="JQuery/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="JQuery/jquery.ui.core.js"></script>
<script type="text/javascript" language="javascript">
$(function () {
var dates = $("#dob").datepicker({
dateFormat: '<%= Context.Session["DatePickerFormat"] %>',
minDate: -0
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
<asp:Label ID="ename" runat="server" Text="fname"></asp:Label>
</td>
<td>
<asp:TextBox ID="fname" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="lname"></asp:Label>
</td>
<td>
<asp:TextBox ID="lname" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label3" runat="server" Text="address"></asp:Label>
</td>
<td>
<asp:TextBox ID="address" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="dob"></asp:Label>
</td>
<td>
<input type="text" id="dob" name="dateFormat2" runat="Server" class="TextBox" style="Width:100px" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
dateformat.aspx.cs
using System.Web.UI;
using System.Data;
using System.Web.UI.WebControls;
public partial class dateformatpage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Context.Session["DefaultFormats"] != null)
{
DataSet ds = (DataSet)Context.Session["DefaultFormats"];
DataTable dt = new DataTable();
dt = ds.Tables[0];
string dob = string.Empty;
string dateformat = string.Empty;
string firstname=string.Empty;
string lastname=string.Empty;
string address=string.Empty;
foreach (DataRow dr in dt.Rows)
{
dateformat = dr[3].ToString();
dob = dr[4].ToString();
firstname=dr[0].ToString();
lastname=dr[1].ToString();
address=dr[2].ToString();
Context.Session["DatePickerFormat"] = dob;
}
string selectformat= Convert.ToString(Context.Session["DatePickerFormat"]);
this.dob.Value = Convert.ToDateTime(selectformat).ToString(dateformat);
this.fname.Text = Convert.ToString(firstname);
this.lname.Text = Convert.ToString(lastname);
this.address.Text = Convert.ToString(address);
}
}
}
output
Note :Please Select Input Date Format as ISO 8601 - yy-mm-dd bec the above code has been written based on that format.
LoginPage
DateFormat Page