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

WPF datagrid cell textbox change event

Entity/Class: public class FeesDetails : INotifyPropertyChanged { public int Id { get; set; } public string FeesName { get; set;} public string FeesDetailsName { get; set; } public int? PaidAmount { get; set; } public event PropertyChangedEventHandler PropertyChanged; private void NotifyPropertyChanged(System.String info) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(info)); } } public int feesAmount { get; set; } public int FeesAmount { get { return this.feesAmount; } set { if (value != this.feesAmount) { this.feesAmount = value; NotifyPropertyChanged("FeesAmount"); } } } } XAML: <DataGrid AutoGenerateColumns="False" Height="21...
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

mvvm double click event in listview

If you want to get the double click event on a listview item you can try with this code; <ListView Grid.Row="0" Grid.RowSpan="3" Grid.Column="0" Width="250" Height="200" HorizontalAlignment="Stretch" VerticalAlignment="Top" AlternationCount="2" BorderBrush="#FFA8CC7B" ItemContainerStyle="{StaticResource alternatingStyle}" ItemsSource="{Binding FromPayerNameList}" SelectedItem="{Binding SelectedFromPayer, Mode=TwoWay}"> <ListView.ItemTemplate> <DataTemplate> <TextBlock Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListView}}}" Text=...
Post a Comment
Read more