Skip to main content

ASP.NET Jquery datepicker

In VS2010 the date time picker control is not available in toolbox. Their is only calender control. but if need to use date picker control in our form stylist j query date picker we can easily do it. let see some stylist datepicker from http://jqueryui.com/themeroller/ 




 You can also choose much more from http://jqueryui.com/themeroller/ . select which theme you want to use and download it. extract the zip file.  after extract you will see the file as like


we will use the css and the js folder data in our application.

Open visual studio 2010 select a new ASP.NET web application, after creating the project add the js and css from the downloaded file.


   In your master page head  show the reference of the js and css file and write the java script for .your datepicker.here i write 2 script named datepicker1 and datepicker2 for two datepicker control.


 <head runat="server">  
   <title></title>  
   <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />  
    <link href="~/Styles/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />  
     <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>  
   <script src="Scripts/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>  
   <%--/* First script for first datepicker name datepicker1 */--%>  
   <script type="text/javascript" language="javascript">  
     $(document).ready(function () {  
       $("#datepicker1").datepicker();  
     });  
   </script>  
    <%--/* First script for first datepicker name datepicker2 */--%>  
    <script type="text/javascript" language="javascript">  
      $(document).ready(function () {  
        $("#datepicker2").datepicker();  
      });  
   </script>  
   <asp:ContentPlaceHolder ID="HeadContent" runat="server">  
   </asp:ContentPlaceHolder>  
 </head>

Now in Default.aspx file i take a table with 2 row and 2 column .


 <table class="style1" align="center">  
     <tr>  
       <td class="style2">  
         <asp:Label ID="Label1" runat="server" Text="Start Date" Font-Bold="True"></asp:Label>  
       </td>  
       <td>  
          <div class="style3">  
        <input id="datepicker1" type="text" />  
       </div>   
         &nbsp;  
       </td>  
     </tr>  
     <tr>  
       <td class="style2">  
         <asp:Label ID="Label2" runat="server" Text="End Date" Font-Bold="True"></asp:Label>  
       </td>  
       <td>  
          <div class="style3">  
        <input id="datepicker2" type="text" />  
       </div>  
         &nbsp;  
       </td>  
     </tr>  
   </table>

here i took 2 input control id name datepicker1 and datepicker1 and both's type is text. which is directly catch up our javascript. now run the application you will see both on click.


 



 


to Get data from the input field in C# you can write :


  string startDatepicker = String.Format("{0}", Request.Form["startDate"]);  
       string endDatepicker = String.Format("{0}", Request.Form["endDate"]);


Enjoy...

Labels:

Comments

  1. Hire DOT NET DevelopersJune 25, 2012 at 9:46 AM

    This is really great, I should apply it on my site. Thanks for sharing us.

    ReplyDelete

Post a Comment

Popular posts from this blog

C# run powershell script as administrator

Recently I was fetching a problem that I need to run a PowerShell script that will change TFS user Display name and SID. I was trying to run that script from C# that was not working due to TFS security update and TLS certificate. Using this code block I resolve the Issue. var newProcessInfo = new System.Diagnostics.ProcessStartInfo(); newProcessInfo.FileName = @"C:\Windows\SysWOW64\WindowsPowerShell\v1.0\powershell.exe"; newProcessInfo.Verb = "runas"; // Define Run as administrator newProcessInfo.Arguments = script; //Define your powershell script newProcessInfo.UseShellExecute = false; newProcessInfo.RedirectStandardOutput = true; // This will enable to read Powershell run output newProcessInfo.RedirectStandardError = true; Process proces = System.Diagnostics.Process.Start(newProcessInfo); proces.WaitForExit(); // I want to read the output string from powershell window StringBuilder output = new StringBuilder(); output.Append("Started"); while (!proces.St
Post a Comment
Read more

ASP.NET MVC razor SAP Crystal report

Crete a new project: Add a aspx Master Page Create a new folder Reports and 2 sub folder crystal & crystalviewer Now add a web form page in crystalviewer  folder. Add the master page namespace in your web form page. MasterPageFile ="~/Views/Shared/ReportSite.Master" Replace your web form by this code < asp : Content ID ="Content1" ContentPlaceHolderID ="ContentPlaceHolder1" runat ="server">      </ asp : Content > Now go to design mode of your web form drag & drop the crystal report viewer in your web form. After that your page will be look look like this. Replace the code: < CR : CrystalReportViewer ID ="EmployeeList" runat ="server"   HasCrystalLogo ="False"     AutoDataBind ="True"   Height ="50px"   EnableParameterPrompt ="false" EnableDatabaseLogonPrompt
Post a Comment
Read more

mvc razor textboxfor change event change another textboxfor value

Based on value of Weight, Rate , CNF & AWB it will change the value of Freight , TTLCNF anfd TTLFright . Freight= Weight*Rate; TTLCNF  = Weight*CNF; TTLFright=  Freight+ TTLCNF  + AWB; @Html.TextBoxFor(model => model.Weight, new { onChange="return GetWight(this);"}) @Html.TextBoxFor(model => model.Rate, new { onChange="return GetWight(this);"})/Kg @Html.TextBoxFor(model => model.Freight, new {disabled = "disabled" , @readonly = "readonly" ,onChange="return GetTTLFright(this);"}) @Html.TextBoxFor(model => model.CNFPK, new { onChange="return GetCNFPK(this);"}) @Html.TextBoxFor(model => model.TTLCNF, new {disabled = "disabled" , @readonly = "readonly",onChange="return GetTTLFright(this);" }) @Html.TextBoxFor(model => model.AWB, new { onChange="return GetTTLFright(this);"}) and script <script> function GetW
Post a Comment
Read more