Add, enable, disable dates to datepicker control is really more than easy but I found most beginners struggle with it to add datepicker with a control or to enable and disable dates for a particular condition. In this article we will learn how to add datepicker without any calendar icon as well as with calendar icon. Disable dates which are less than today's date, disable dates which are greater than today's date. Enable date which are one month back or two month latter. There could be many conditions, don't need to discuss every situation here, after learning how we can disable date by using min and max we can achieve any condition.
First of all we need to add the required JavaScript files to render the calendar
CSS files add in header section
<link href="~/Content/themes/base/datepicker.css" rel="stylesheet" />
<link href="~/Content/themes/base/core.css" rel="stylesheet" />
<link href="~/Content/themes/base/theme.css" rel="stylesheet" />
JavaScript files need to be added at the bottom of the layout page
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>
If you don't have these files then run Install-Package jQuery.UI.Combined in package manager. You can change the version number of the file or you can add them into bundle section to create he bundle.
We have everything to add the calendar to any control, let's add the control to a normal input type without any calendar image. It will open the calendar on clicking or getting focus that control.
// HTML
<input type="text" id="OrderDate" class="form-control" placeholder="Order Date" />
// JavaScript at the bottom of the page
<script>
$('#OrderDate').datepicker();
</script>
Note we used the Id of the control and added calendar to it, is not it more than easy :) in the same way we can add as many controls as we want, so a single for every control, that's it.
To disable date after one month one week, without any minimum date
$('#OrderDate').datepicker({ maxDate: "+1M 1W" });
To disable the date range, say we want to show the option to select date from last one month only:
$('#OrderDate').datepicker({ minDate: "-1M", maxDate: "+0D" });
To disable date between 10 day before to 10 days latter then
$('#OrderDate').datepicker({ minDate: "-10D", maxDate: "+10D" });
In some situations we want to show more than one month calendar, let's say we want to give the option to show three months calendar at a time then
$('#OrderDate').datepicker({
changeMonth: true,
numberOfMonths: 3
});
Date Range Selection:
Say we have a search page to use from and to date to search the result, it is obvious to all the user to select from date which shold not be the greater than current date and to date must not be less than from date and greater than current date. Let's see if we can achieve it easily or not
Let's add the first html to the page
<div class="form-horizontal">
<div class="form-group">
<label class="control-label col-md-2">From Date</label>
<div class="col-md-2">
<input type="text" id="FromDate" class="form-control" placeholder="From Date" />
</div>
<label class="control-label col-md-2">To Date</label>
<div class="col-md-2">
<input type="text" id="ToDate" class="form-control" placeholder="To Date" />
</div>
</div>
</div>
Now we will try to add the script for calendar
@section scripts{
<script>
$('#FromDate').datepicker({
maxDate: "0D",
onClose: function (selectedDate) {
$("#ToDate").datepicker("option", "minDate", selectedDate);
}
});
$('#ToDate').datepicker({
maxDate: "0D",
onClose: function (selectedDate) {
$("#FromDate").datepicker("option", "maxDate", selectedDate);
}
});
</script>
}
If you will notice there nothing magical but we try to add minimum date for ToDate on selecting the from date and on selecting the to date we are adding the maxDate date for FromDate. We already set the max date for both the control to current date by using 0D as the maximum date because we don't want to allow the user to select greater than current date. Here is the out put
Select any date into "From Date"", it will be the minimum date for "To Date". Select any date into "To Date", it will be maximum date for "From Date", means it is working as we want.
How to use the calendar image: to open the calendar and select date for the text box and make the text box read only so user cannot enter the date manually. We need calendar image, I created a new folder images and added a new calendar image in it and change the code to add the calendar button, see this
<script>
$('#FromDate').datepicker({
showOn: "button",
buttonImage: "/images/calendar_icon.png",
buttonImageOnly: true,
buttonText: "Select from date"
});
$('#ToDate').datepicker({
showOn: "button",
buttonImage: "/images/calendar_icon.png",
buttonImageOnly: true,
buttonText: "Select to date"
});
</script>
Here is the output of the above change:
Note: I have not change any HTML, because that is not need, jQuery automatically add the provided image page afte the control.
Format Date:
To format the date we can use dateFormat option with our date format say
Animation: We covered all of the features we need to work for most of the situations, it's time to do some fun work. To animate can use following type of animation
Till now whatever code we used that would be there and add one more line to animate
$("#FromDate").datepicker();
$("#FromDate").datepicker("option", "showAnim", 'bounce');
If you want see all the parameter and option for date picker check jQuery documentation
Common mistake and error:
We use our script at the bottom of the page, which renders into the body of the layout means before the jQuery files added to the page and gives error Uncaught ReferenceError: $ is not defined. To avoid it, always write your script in to @section scripts like this, it will always add you script at the very bottom of the page after adding all script files on our layout page.
@section scripts{
<script>
$('#OrderDate').datepicker();
</script>
}
|
Having 13+ years of experience in Microsoft Technologies (C#, ASP.Net, MVC and SQL Server). Worked with Metaoption LLC, for more than 9 years and still with the same company. Always ready to learn new technologies and tricks.
|
| By Ali Adravi On 15 Mar, 15 Viewed: 10,335 |
We can use JavaScript to get parent element or jQuery to get parent element but which one would be best for you is up to your need and familiarity with JavaScript and jQuery. In this article we will take different conditions and examples to show how jquery finds parent element and same case with... By Hamden On 06 Apr 2013 Viewed: 10,628
Whenever I need to use jquery with checkbox different functionality I always search for different sites to get my answer so I decided to write a small article to keep all the jquery functionality with checkbox at a single place, so trying to keep everything here. ***To get a checkbox on a page... By Ali Adravi On 16 Nov 2012 Viewed: 910
Angularjs jquery calendar with minimum code to attach datepicker, how to extend to restrict the dates from a particular day, month or year, how to make calendar to validate start and end date from one control to other after user selection, how to format date before rendering or how to disable... By Ali Adravi On 26 Dec 2017 Viewed: 5,284
JQuery, a popular open source JavaScript library, is CSS3 compliant. With JQuery, you can easily maneuver the DOM elements in your web page. Basically, it allows you to add/delete DOM elements to your HTML based content. If you want to manipulate the DOM elements using JQuery and Visual Studio,... By Deepa Ranganathan On 31 Aug 2015 Viewed: 899
Rotating banner appeals most of the client and it's quite time consuming for developers to judge which library they need to use and do modification in them according to their requirements. In this article we are going to create the simplest and fully working rotating banner by writing just two... By Ali Adravi On 18 Apr 2015 Viewed: 7,428