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