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,
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?
First thing,you will have
to include all of the CSS and JS files into your page like this:
<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.custom.min.js" type="text/javascript"></script>
<script src="Scripts/daterangepicker.jQuery.js" type="text/javascript"></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" />
<style type="text/css">
.ui-daterangepicker
{
font-size: 10px;
}
</style>
Then add this html:
<asp:TextBox ID="TextBox1" runat="server" Font-Size="10px"></asp:TextBox><asp:Button
ID="SubmitButton" runat="server" Text="Submit" OnClick="SubmitButton_Click" />
<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):
<script type="text/javascript">
$(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:
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 code?:
<style type="text/css">
.ui-daterangepicker
{
font-size: 10px;
}
</style>
A:For two reasons: 1)To show the Daterangepicker
in a smaller size because it's original size is huge 2)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- I see you have added these two lines,what they do?
$("#<%= TextBox1.ClientID %>").attr("readonly", "readonly");
$("#<%= TextBox1.ClientID %>").attr("unselectable", "on");
A:The first line will make the textbox not editable by the user,the second will block the blinking typing cursor from appearing if the user clicked on the textbox,you will notice that both lines 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 at at the author's website and post a reference
to your post here.
