How to add DateTimePicker using Jquery?

<div dir="ltr" style="text-align: left;" trbidi="on"> <div style="background: white; line-height: 14.4pt; margin-bottom: .0001pt; margin: 0in;"> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <b><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri;">Description:<o:p></o:p></span></u></b></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <br /></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">In this article, I will explain how to add DateTimePicker</span><b><span style="font-family: "Calibri","sans-serif"; font-size: 11.0pt;"> </span></b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">using <a href="http://www.jqueryjohn.com/">Jquery</a>.  <o:p></o:p></span></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <br /></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">In some scenario, we need to select date with time.<o:p></o:p></span></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <br /></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">Datetimepicker is used to open a calendar with slider components that will used to select time zone.<o:p></o:p></span></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <br /></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">Here, Datetimepicker plugin is used with JqueryUI datepicker. So you need to download both JqueryUI and timepicker plugins.<o:p></o:p></span></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <br /></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">1. Download JqueryUI from<span class="apple-converted-space"> </span><span style="color: #333333;"><span style="color: #720000;"><a href="http://jqueryui.com/">http://jqueryui.com/</a></span></span></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;"><span style="color: #333333;"><br /></span></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt; text-indent: -0.25in;"> <span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 10.0pt;">     </span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">2.</span><span style="font-size: 7.0pt;"> </span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">Extract it and<span class="apple-converted-space"> </span><span style="color: #333333;"><span style="color: #720000;"><a href="http://www.jqueryjohn.com/2014/03/how-to-include-jquery-file-on-page.html">include the files</a></span><u1:p></u1:p></span></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt; text-indent: -0.25in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;"><span style="color: #333333;"><br /></span></span></div> <div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">script</span><span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: red;">src</span><span style="color: blue;">="jquery-1.10.2.js"</span> <span style="color: red;">type</span><span style="color: blue;">="text/javascript"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">script</span><span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: red;">type</span><span style="color: blue;">="text/javascript"</span> <span style="color: red;">src</span><span style="color: blue;">="jquery-ui-1.10.3.custom.js"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">link</span><span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: red;">href</span><span style="color: blue;">="jquery-ui-1.10.3.custom"</span> <span style="color: red;">rel</span><span style="color: blue;">="Stylesheet"</span> <span style="color: red;">type</span><span style="color: blue;">="text/css"</span> <span style="color: blue;">/><o:p></o:p></span></span></div> <div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;"> <br /></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">3. Download Timepicker <span style="color: #333333;"><a href="http://www.jqueryjohn.com/search/label/PlugIn">Plugin</a>.<o:p></o:p></span></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;"><span style="color: #333333;"><br /></span></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">You can download from <a href="https://github.com/trentrichardson/jQuery-Timepicker-Addon"><span style="color: windowtext;">https://github.com/trentrichardson/jQuery-Timepicker-Addon</span></a><span class="apple-converted-space"> </span>or<o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;"><span style="color: windowtext;"><a href="http://trentrichardson.com/examples/timepicker/">http://trentrichardson.com/examples/timepicker/</a></span><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;"><br /></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">4.<span style="background-position: initial initial; background-repeat: initial initial;"> Extract it and include the files<span class="apple-converted-space"> </span></span></span><span style="background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Verdana, sans-serif; font-size: 10pt;">jquery-ui-timepicker-addon.js</span><span class="apple-converted-space"><span style="background-position: initial initial; background-repeat: initial initial; color: #333333; font-family: Verdana, sans-serif; font-size: 10pt;"> </span><span style="background-position: initial initial; background-repeat: initial initial; color: #333333; font-family: Verdana, sans-serif; font-size: 10pt;">and<span class="apple-converted-space"> </span></span></span><span style="background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Verdana, sans-serif; font-size: 10pt;">jquery-ui-sliderAccess.js</span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 10.0pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;"> <span style="background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Verdana, sans-serif; font-size: 10pt;"><br /></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt; text-indent: -0.25in;"> <span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 10.0pt;">     </span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">5. Once the document is ready, initialize datetimepicker widget with the textbox.<u1:p></u1:p></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">        $(document).ready(<span style="color: blue;">function</span> () {<o:p></o:p></span></div> <div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">"#TextBox1"</span>).datetimepicker();<o:p></o:p></span></div> <div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">        });<o:p></o:p></span></div> <div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;"> <br /></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <b><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri;">Example program:<o:p></o:p></span></u></b></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <br /></div> <div style="background-position: initial initial; background-repeat: initial initial; border: 1pt solid windowtext; padding: 1pt 4pt;"> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">html</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">xmlns</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="http://www.w3.org/1999/xhtml"></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">head</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">id</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="Head1"</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">runat</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="server"></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">    </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">title</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">title</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">    </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">script</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">type</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="text/javascript"</span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">src</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">script</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">    </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">link</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">href</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css"</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">rel</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="stylesheet"</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">type</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="text/css"</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">/></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">    </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">script</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">type</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="text/javascript"</span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">src</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">script</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">    </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">script</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">src</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="jquery-ui-timepicker-addon.js"</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">type</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="text/javascript"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">script</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">    </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">script</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">src</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="jquery-ui-sliderAccess.js"</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">type</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="text/javascript"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">script</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">    </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">style</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">type</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="text/css"></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">        </span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">.ui-datepicker</span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">        {</span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">            </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">font-size</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">: </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">10pt</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">;</span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">        }</span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">    </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">style</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">    </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">script</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">type</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="text/javascript"></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">        $(</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">function</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> () {</span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">            $(</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">'#TextBox1'</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">).datetimepicker({</span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">                addSliderAccess: </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">true</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">,</span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">                sliderAccessArgs: { touchonly: </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">false</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> }</span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">            });</span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">        });</span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">    </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">script</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">head</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">body</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">    </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">form</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">id</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="form1"</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">runat</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="server"></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">    </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">div</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">        </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">asp</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">:</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">TextBox</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">ID</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="TextBox1"</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">runat</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="server"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">asp</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">:</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">TextBox</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">        </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">asp</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">:</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">Button</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">ID</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="Button1"</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">runat</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="server"</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">Text</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="Button"</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">/></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">    </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">div</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">    </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">form</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">body</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">html</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> </div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <br /></div> <u1:p></u1:p> <br /> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <u><span style="color: #666666; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-weight: bold;">How to use Jquery Datetimepicker , How to add DateTimepicker for input field using Jquery , Adding a TimePicker for  textbox, How to add DateTimePicker using Jquery . Add a DateTimePicker  for textbox<o:p></o:p></span></u></div> </div> </div>

How to add DateTimePicker using Jquery?

Description: In this article, I will explain how to add DateTimePicker using Jquery .   In some scenario, we need to select date...

Read more »

How to implement Scrollable Gridview with fixed header using Jquery?

<div dir="ltr" style="text-align: left;" trbidi="on"> <div style="background: white; line-height: 14.4pt; margin-bottom: .0001pt; margin: 0in;"> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <b><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri;">Description:<o:p></o:p></span></u></b></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <br /></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">In this article, I will explain how to implement scrollable gridview with fixed header</span><b><span style="font-family: "Calibri","sans-serif"; font-size: 11.0pt;"> </span></b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">using <a href="http://www.jqueryjohn.com/">Jquery</a>.  <o:p></o:p></span></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <br /></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">As we know, gridview is one of the powerful data bound controls in visual studio. Sometimes while scrolling the gridview with large amount of data, gridview header will hide. <o:p></o:p></span></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <br /></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">In this situation, it will very difficult to identify the header for the gridview records.<o:p></o:p></span></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <br /></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">To overcome this, even we scroll gridview records, headers will remain at the top and it will visible always.<o:p></o:p></span></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <br /></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">1. Download <b>ScrollableGridPlugin</b> <a href="http://www.jqueryjohn.com/search/label/PlugIn">Plugin</a><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;"> <br /></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;"> You can download from<span class="apple-converted-space"> </span><span style="color: #333333;"><span style="color: #720000;"><a href="http://www.getcodesamples.com/src/DF21ADA9/D085505B">http://www.getcodesamples.com/src/DF21ADA9/D085505B</a></span><o:p></o:p></span></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;"><span style="color: #333333;"><br /></span></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">2. Include the file</span><span style="font-family: "Verdana","sans-serif"; font-size: 9.0pt;"> <span class="apple-converted-space"> </span></span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">ScrollableGridPlugin.js<u1:p></u1:p> and </span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">latest jquery version.<o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;"><br /></span></div> <div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;"> <span style="background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="background-position: initial initial; background-repeat: initial initial; color: maroon; font-family: Consolas; font-size: 9.5pt;">script</span><span class="apple-converted-space"><span style="background-position: initial initial; background-repeat: initial initial; color: #333333; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-position: initial initial; background-repeat: initial initial; color: red; font-family: Consolas; font-size: 9.5pt;">src</span><span style="background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">="jquery-1.10.2.js"</span><span class="apple-converted-space"><span style="background-position: initial initial; background-repeat: initial initial; color: #333333; font-family: Consolas; font-size: 9.5pt;"> </span></span><span style="background-position: initial initial; background-repeat: initial initial; color: red; font-family: Consolas; font-size: 9.5pt;">type</span><span style="background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">="text/javascript"></</span><span style="background-position: initial initial; background-repeat: initial initial; color: maroon; font-family: Consolas; font-size: 9.5pt;">script</span><span style="background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">script</span><span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: red;">src</span><span style="color: blue;">="ScrollableGridPlugin.js"</span> <span style="color: red;">type</span><span style="color: blue;">="text/javascript"></</span><span style="color: maroon;">script</span><span style="color: blue;">><o:p></o:p></span></span></div> <div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;"> <br /></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">3.<span class="apple-converted-space"><span style="background-position: initial initial; background-repeat: initial initial;"> </span></span><span style="background-position: initial initial; background-repeat: initial initial;">Once the document is ready, initialize the Scrollable widget to the Gridview.<o:p></o:p></span></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;"> <span style="font-family: Consolas; font-size: 9.5pt; line-height: normal;">        $(document).ready(</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: normal;">function</span><span style="font-family: Consolas; font-size: 9.5pt; line-height: normal;"> () {</span></div> <div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">'#GridView1'</span>).Scrollable();<o:p></o:p></span></div> <div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">        });<o:p></o:p></span></div> <div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;"> <br /></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;"> <b><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">Example Program:<o:p></o:p></span></u></b></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;"> <b><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;"><br /></span></u></b></div> <div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;"> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">html</span><span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: red;">xmlns</span><span style="color: blue;">="http://www.w3.org/1999/xhtml"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">head</span><span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: red;">runat</span><span style="color: blue;">="server"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">title</span><span style="color: blue;">></</span><span style="color: maroon;">title</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">script</span> <span style="color: red;">type</span><span style="color: blue;">="text/javascript"</span> <span style="color: red;">src</span><span style="color: blue;">="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">script</span> <span style="color: red;">src</span><span style="color: blue;">="ScrollableGridPlugin.js"</span> <span style="color: red;">type</span><span style="color: blue;">="text/javascript"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">script</span> <span style="color: red;">type</span><span style="color: blue;">="text/javascript"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">        $(document).ready(<span style="color: blue;">function</span> () {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">'#GridView1'</span>).Scrollable({<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">                ScrollHeight: 200,<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">                Width: 300<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">            });<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">        });<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">head</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">body</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">form</span> <span style="color: red;">id</span><span style="color: blue;">="form1"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">div</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"><</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">GridView</span> <span style="color: red;">ID</span><span style="color: blue;">="GridView1"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"</span> <span style="color: red;">AutoGenerateColumns</span><span style="color: blue;">="false"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;"><</span><span style="color: maroon;">Columns</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;"><</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">BoundField</span> <span style="color: red;">DataField</span><span style="color: blue;">="Age"</span> <span style="color: red;">ItemStyle-CssClass</span><span style="color: blue;">="CAge"</span> <span style="color: red;">HeaderText</span><span style="color: blue;">="Age"</span> <span style="color: red;">ItemStyle-Width</span><span style="color: blue;">="80"</span> <span style="color: blue;">/></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;"><</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">BoundField</span> <span style="color: red;">DataField</span><span style="color: blue;">="Sex"</span> <span style="color: red;">ItemStyle-CssClass</span><span style="color: blue;">="CSex"</span> <span style="color: red;">HeaderText</span><span style="color: blue;">="Sex"</span> <span style="color: red;">ItemStyle-Width</span><span style="color: blue;">="80"</span> <span style="color: blue;">/></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;"><</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">BoundField</span> <span style="color: red;">DataField</span><span style="color: blue;">="Email"</span> <span style="color: red;">ItemStyle-CssClass</span><span style="color: blue;">="CEmail"</span> <span style="color: red;">HeaderText</span><span style="color: blue;">="Email"</span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: red;">ItemStyle-Width</span><span style="color: blue;">="140"</span> <span style="color: blue;">/></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;"></</span><span style="color: maroon;">Columns</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"></</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">GridView</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"></</span><span style="color: maroon;">div</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"></</span><span style="color: maroon;">form</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">body</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">html</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">><o:p></o:p></span></div> </div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;"> <br /></div> <u1:p></u1:p> <br /> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;"> <u><span style="color: #666666; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-weight: bold;">Scrollable gridview with fixed header using Jquery , Scrollable gridview using Jquery , Implement Scrollable gridview using Jquery, How to make gridview  Scrollable with fixed Header,  Jquery Scrollable gridview plugin.<o:p></o:p></span></u></div> </div> </div>

How to implement Scrollable Gridview with fixed header using Jquery?

Description: In this article, I will explain how to implement scrollable gridview with fixed header using Jquery .   As we know,...

Read more »

How to add Datepicker using Jquery?

<div dir="ltr" style="text-align: left;" trbidi="on"> <div style="background: white; line-height: 14.4pt; margin-bottom: .0001pt; margin: 0in;"> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <b><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri;">Description:<o:p></o:p></span></u></b></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <br /></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">In this article, I will explain how to add Datepicker <a href="http://www.jqueryjohn.com/search/label/PlugIn">plugin</a></span><b><span style="font-family: "Calibri","sans-serif"; font-size: 11.0pt;"> </span></b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">using <a href="http://www.jqueryjohn.com/">Jquery</a>.  <o:p></o:p></span></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <br /></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">Datepicker is used to open an interactive calendar in a small overlay that will choose date for the input fields.<o:p></o:p></span></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <br /></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">1. Download <b>JqueryUI</b> from<span class="apple-converted-space"> </span><span style="color: #333333;"><span style="color: #720000;"><a href="http://jqueryui.com/">http://jqueryui.com/</a></span></span></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;"><span style="color: #333333;"><br /></span></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt; text-indent: -0.25in;"> <span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 10.0pt;">     </span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">2.</span><span style="font-size: 7.0pt;"> </span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">Extract it and<span class="apple-converted-space"> </span><span style="color: #333333;"><span style="color: #720000;"><a href="http://www.jqueryjohn.com/2014/03/how-to-include-jquery-file-on-page.html">include the files</a></span><u1:p></u1:p></span></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt; text-indent: -0.25in;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;"><span style="color: #333333;"><br /></span></span></div> <div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">script</span><span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: red;">src</span><span style="color: blue;">="jquery-1.10.2.js"</span> <span style="color: red;">type</span><span style="color: blue;">="text/javascript"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">script</span><span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: red;">type</span><span style="color: blue;">="text/javascript"</span> <span style="color: red;">src</span><span style="color: blue;">="jquery-ui-1.10.3.custom.js"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">link</span><span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: red;">href</span><span style="color: blue;">="jquery-ui-1.10.3.custom"</span> <span style="color: red;">rel</span><span style="color: blue;">="Stylesheet"</span> <span style="color: red;">type</span><span style="color: blue;">="text/css"</span> <span style="color: blue;">/><o:p></o:p></span></span></div> <div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;"> <br /></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt; text-indent: -0.25in;"> <span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 10.0pt;">     </span><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">3. Once the document is ready, initialize datepicker widget with the textbox.<u1:p></u1:p></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">        $(document).ready(<span style="color: blue;">function</span> () {<o:p></o:p></span></div> <div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">"#TextBox1"</span>).datepicker();<o:p></o:p></span></div> <div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-layout-grid-align: none; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">        });<o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;"> <br /></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;"> <b><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">Example program:<o:p></o:p></span></u></b></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;"> <b><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;"><br /></span></u></b></div> <div style="background-position: initial initial; background-repeat: initial initial; border: 1pt solid windowtext; padding: 1pt 4pt;"> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">html</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">xmlns</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="http://www.w3.org/1999/xhtml"></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">head</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">runat</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="server"></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">    </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">title</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">title</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">    </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">link</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">href</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css"</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">rel</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="stylesheet"</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">type</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="text/css"</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">/></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">    </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">script</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">type</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="text/javascript"</span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">src</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">script</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">    </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">script</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">type</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="text/javascript"</span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">src</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">script</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">style</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">type</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="text/css"></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">        </span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">.ui-datepicker</span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">        {</span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">            </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">font-size</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">: </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">8pt</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">;</span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">        }</span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">style</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">    </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">script</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">type</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="text/javascript"></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">        $(</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">function</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> () {</span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">            $(</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">"#TextBox1"</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">).datepicker({</span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">            showAnim: </span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">"slide"</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">,</span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">            showButtonPanel: </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">true</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">,</span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">            changeMonth: </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">true</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">,</span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">            changeYear: </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">true</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">,</span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">            dateFormat: </span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">"mm/dd/yy"</span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">            });</span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">        });</span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">    </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">script</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">head</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">body</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">    </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">form</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">id</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="form1"</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">runat</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="server"></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">    </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">div</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">        </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">asp</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">:</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">TextBox</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">ID</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="TextBox1"</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">runat</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="server"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">asp</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">:</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">TextBox</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">        </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">asp</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">:</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">Button</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">ID</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="Button1"</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">runat</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="server"</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">Text</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="Button"</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">OnClick</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">="getdata"</span><span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">/></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">    </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">div</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: #333333; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">    </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">form</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">body</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">></span><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 9.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; border: none; line-height: 14.4pt; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">html</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-fareast-font-family: "Times New Roman";">><o:p></o:p></span></div> </div> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt; margin-bottom: 0.0001pt;"> <br /></div> <br /> <div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 14.4pt;"> <u><span style="color: #666666; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-weight: bold;">How to use Jquery Datepicker , How to add Datepicker for input field using Jquery , Add Jquery UI Datepicker  for textbox, How to add Jquery UI Datepicker . Add a Datepicker for textbox</span></u><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;"><o:p></o:p></span></u></div> </div> </div>

How to add Datepicker using Jquery?

Description: In this article, I will explain how to add Datepicker plugin using Jquery .   Datepicker is used to open an interac...

Read more »

How to validate Email address using Jquery?

<div dir="ltr" style="text-align: left;" trbidi="on"> <div style="background: white; line-height: 14.4pt; margin-bottom: .0001pt; margin: 0in;"> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <b><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri;">Description:<o:p></o:p></span></u></b></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <br /></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">In this article, I will explain how to validate email address</span><b><span style="font-family: "Calibri","sans-serif"; font-size: 11.0pt;"> </span></b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">using </span><a href="http://www.jqueryjohn.com/"><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">Jquery</span></a><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">.  <o:p></o:p></span></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <br /></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <span style="background: #F9F9F9; color: #161616; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Segoe UI";">To validate email address on client side, we can use JavaScript and Jquery.<o:p></o:p></span></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <br /></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <span style="background: #F9F9F9; color: #161616; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Segoe UI";">We have to use regular expression patterns for validating email address. Regular expression will check to make sure that the entered text is a valid email address.<o:p></o:p></span></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <br /></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <span style="background: #F9F9F9; color: #161616; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Segoe UI";">Here, I am using a function which will take value of the email address as parameter and it will test with the regular expression defined in the function.<o:p></o:p></span></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <br /></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <span style="background: #F9F9F9; color: #161616; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Segoe UI";">If the email address matches with the regular expression, function will return true. If it is not valid, function will return false.<o:p></o:p></span></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <br /></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <span style="background: #F9F9F9; color: #161616; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Segoe UI";">The result is displayed to the user via alert box.<o:p></o:p></span></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <br /></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <b><u><span style="background: #F9F9F9; color: #161616; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Segoe UI";">Example program:<o:p></o:p></span></u></b></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <br /></div> <div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;"> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">html</span><span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: red;">xmlns</span><span style="color: blue;">="http://www.w3.org/1999/xhtml"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">head</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">title</span><span style="color: blue;">></</span><span style="color: maroon;">title</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">script</span> <span style="color: red;">type</span><span style="color: blue;">="text/javascript"</span> <span style="color: red;">src</span><span style="color: blue;">="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">script</span> <span style="color: red;">type</span><span style="color: blue;">="text/javascript"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">        $(document).ready(<span style="color: blue;">function</span> () {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">"#Button1"</span>).click(<span style="color: blue;">function</span> () {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">if</span> (IsvalidEmail($(<span style="color: maroon;">"#TextBox1"</span>).val())) {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    alert(<span style="color: maroon;">"Valid Email Address."</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">                }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">else</span> {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    alert(<span style="color: maroon;">"InValid Email Address."</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">                }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">            });<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;">function</span> IsvalidEmail(args) {<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">var</span> obj = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">return</span> obj.test(args);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">            };<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">        });<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">head</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">body</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">form</span> <span style="color: red;">id</span><span style="color: blue;">="form1"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"><</span><span style="color: maroon;">div</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"><</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">TextBox</span> <span style="color: red;">ID</span><span style="color: blue;">="TextBox1"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"></</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">TextBox</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"><</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">Button</span> <span style="color: red;">ID</span><span style="color: blue;">="Button1"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"</span> <span style="color: red;">Text</span><span style="color: blue;">="Button"</span> <span style="color: blue;">/></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"></</span><span style="color: maroon;">div</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="font-family: Consolas; font-size: 9.5pt;">    <span style="color: blue;"></</span><span style="color: maroon;">form</span><span style="color: blue;">></span><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">body</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div> <div class="MsoNormal" style="border: none; line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; mso-border-alt: solid windowtext .5pt; mso-layout-grid-align: none; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0in; text-autospace: none;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">html</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">><o:p></o:p></span></div> </div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <br /></div> <br /> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <u><span style="color: #666666; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-weight: bold;">Email validation using Jquery , Jquery Regex validation for Email address using Jquery , Regular Expression to validate Email address  using Jquery, Check valid Email addresses using Jquery. Email address validation with Jquery</span></u><span style="background-position: initial initial; background-repeat: initial initial; color: #444444; font-family: Verdana, sans-serif; font-size: 10pt;"><o:p></o:p></span></div> </div> </div>

How to validate Email address using Jquery?

Description: In this article, I will explain how to validate email address using Jquery .   To validate email address on client ...

Read more »