How to use jQuery Date Range Picker plugin in asp.net

I stepped by this page: http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/ and let me tell you,this is one of the best and coolest daterangepicker in the web in my opinion,they did a great job with extending the original jQuery UI DatePicker.Of course I made enhancements to the original plugin (fixed few bugs) and added a new option (Clear) to clear the textbox. In this article I well use that updated plugin and show you how to use it in asp.net..you will definitely like it.

So,What do I need?

1- jQuery library : you can use 1.3.2 or 1.4.2 which is the latest version so far,in my article I will use the latest version.
2- jQuery UI library (1.8): As I mentioned earlier,daterangepicker plugin is based on the original jQuery UI DatePicker so that library should be included into your page.
3- jQuery DateRangePicker plugin : you can go to the author page or use the modified one (it's included in the attachment),in this article I will use the modified one.
4- Visual Studio 2005 or later : very funny :D[as if you don't already knows that],anyway in my article I will use VS 2008.

Note: in the attachment,I included all CSS and JS files so don't worry.

How to use it?

?
1
2
3
4
<script type="text/javascript" src="Scripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" src="Scripts/daterangepicker.jQuery.js"></script>
<link href="CSS/redmond/jquery-ui-1.8.custom.css" rel="stylesheet" type="text/css"> <link href="CSS/ui.daterangepicker.css" rel="stylesheet" type="text/css">


Then add this html:

?
1
2
3
4
<asp:textbox id="TextBox1" runat="server" font-size="10px"></asp:textbox>
<asp:button id="SubmitButton" runat="server" text="Submit" onclick="SubmitButton_Click"></asp:button>
<span>First Date:</span><asp:label id="FirstDate" runat="server"></asp:label>
<span>Second Date:</span><asp:label id="SecondDate" runat="server"></asp:label>


As you can see,it includes TextBox1 which we are going to attach the daterangepicker to it,2 labels to show you later on by code on how to read the date from the textbox and set it to the labels
Now we have to attach the daterangepicker to the textbox by using jQuery (Note:visit the author's website for more info on daterangerpicker's options and how to use them):

?
1
2
3
4
5
6
7
8
<script type="text/javascript">// <![CDATA[
            $(function() {
                $("#<%= TextBox1.ClientID %>").attr("readonly", "readonly");
                $("#<%= TextBox1.ClientID %>").attr("unselectable", "on");
                $("#<%= TextBox1.ClientID %>").daterangepicker({ presetRanges: [], arrows: true, dateFormat: 'd M, yy', clearValue: '', datepickerOptions: { changeMonth: true, changeYear: true} });
            });
         
// ]]></script>


Finally,add this C# code:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
protected void SubmitButton_Click(object sender, EventArgs e)
    {
        if (TextBox1.Text.Trim().Length == 0)
        {
            return;
        }
        string selectedDate = TextBox1.Text;
 
        if (selectedDate.Contains("-"))
        {
            DateTime startDate;
            DateTime endDate;
            string[] splittedDates = selectedDate.Split("-".ToCharArray(), StringSplitOptions.RemoveEmptyEntries);
            if (splittedDates.Count() == 2 && DateTime.TryParse(splittedDates[0], out startDate) && DateTime.TryParse(splittedDates[1], out endDate))
            {
                FirstDate.Text = startDate.ToShortDateString();
                SecondDate.Text = endDate.ToShortDateString();
            }
            else
            {
                //maybe the client has modified/altered the input i.e. hacking tools
            }
        }
        else
        {
            DateTime selectedDateObj;
            if (DateTime.TryParse(selectedDate, out selectedDateObj))
            {
                FirstDate.Text = selectedDateObj.ToShortDateString();
                SecondDate.Text = string.Empty;
            }
            else
            {
                //maybe the client has modified/altered the input i.e. hacking tools
            }
        }
    }


This is the way on how to read from the textbox,That's it!.

FAQ:

1-Why did you add this style?:


A:For two reasons:

  • To show the Daterangepicker in a smaller size because it's original size is huge.
  • To show you how to control the size of it.


2- Can I change the theme?
A: yes you can,you will notice that I'm using Redmond theme which you will find it in jQuery UI website,visit their website and download a different theme,you may also have to make modifications to the css of daterangepicker,it's all yours.

3- Why did you add a font size to the textbox?
A: To make the design look better,try to remove it and see by your self.

4- Can I register the script at codebehind?
A: yes you can

5- Why do I need to set attributes (readonly) and (unselectable) for the textbox ?

?
1
2
3
4
5
6
7
8
<script type="text/javascript">// <![CDATA[
            $(function() {
                $("#<%= TextBox1.ClientID %>").attr("readonly", "readonly");
                $("#<%= TextBox1.ClientID %>").attr("unselectable", "on");
                $("#<%= TextBox1.ClientID %>").daterangepicker({ presetRanges: [], arrows: true, dateFormat: 'd M, yy', clearValue: '', datepickerOptions: { changeMonth: true, changeYear: true} });
            });
         
// ]]></script>


A:readonly will make the textbox not editable by the user,unselectable will block the blinking typing cursor from appearing if the user clicked on the textbox,you will notice that both attributes are necessary to be used together,you can't just use one of them...for logical reasons of course.

Finally,I hope everyone liked the article and as always,your feedbacks are always welcomed and if anyone have any suggestions or made any modifications that might be useful for anyone else then please post it here and at at the author's website.

P.S : There is no harm in posting comments

P.S. In addition to blogging, I am also now using Twitter for quick updates and to share links. Follow me at: twitter.com/alaa9jo

13 Comments

  • Thanks Diana,Yes I made a lot of changes to the JS and maybe to the css file as well. Anyway it should work if you used the JS and css files from the original Filament Group article so I'm sure you are missing something or did something in a wrong way

  • I want to use this code in custom aspx pages in Sharepoint, but I get error message: "Code block are not allowed in this file."

  • I have to say that this issue has nothing to do with the library.

    Anyway,To get this working you need to modify the web.config of your web application. For instance, if you want to allow server side script on pages from the masterpage & pagelayout gallery you have to modify the PageParserPaths into:




  • I'm not sure if this is the real cause of the issue in SharePoint but yes there is another way to write the line.

    Replace: $('#')

    With this: $("input[id$='TextBox1']")

  • Thank you for help, that was solution for my problem, now everything works fine :)

  • This is awesome, but can you please describe if it's possible to change the first day of week? I played around a little with the .js code but couldn't get it to work since I suck at javascript/jQuery.

    I'm planning to use this on a site where the visitors will be located all over the world and they probably want to have the calendar localized. Weekday names in English are all fine but I need to change first day of week depending on regional settings since they will select weekly data on my site.

  • if you want to change the first day of the week WITHOUT localization then its very simple,use the option firstDay in the datepickeroptions:

    datepickerOptions: { changeMonth: true, changeYear: true,firstDay:1}

    firstDay:1 --> Monday,0:Sunday

  • So easy! I tried a similar solution but didn't wrap it in a datepickerOptions object. Now it's working like it should!

    Thank you for the quick answer.

  • A million Thanks!!!!!!!!!!!

  • Thanks for such a useful contribution, I was wondering if this could be used within a update panel.
    Right now asynchronous post back makes it disappear.

  • Thank you. I been fiddling with it trying to work in asp.net. And then come across your article, you made my day.

  • thankx

  • Thankkkkssss.

Add a Comment

As it will appear on the website

Not displayed

Your website