Tuesday, September 9, 2014

JQuery DatePicker with previous or future date disable in ASP.NET

Hi, in this example i will show you how to use JQuery DatePicker in ASP.NET along with disable future date or previous date. Before you start this lets check how to use JQuery DatePicker.

Take a html page and add JQuery api into your page. After this take a input textbox and write down the following code.

Now your problem is to get it in an ASP TextBox. So how to do this. Very simple replace the textbox with an ASP TextBox and in the place of #datePicker write down
<%= txtDatePicker.ClientID %>
where txtDatePicker is the ID of the ASP TextBox.
Now its time to disable the previous date and past date in the calender. For this we will get help of maxDate and minDate in DatePicker. Check the following code
$(function() {
var date = new Date();
var currentMonth = date.getMonth();
var currentDate = date.getDate();
var currentYear = date.getFullYear();
/* For future date */
$('<%= txtDatePicker.ClientID %>').datepicker({
maxDate: new Date(currentYear, currentMonth, currentDate)

/* For past date */
$('<%= txtDatePicker.ClientID %>').datepicker({
minDate: new Date(currentYear, currentMonth, currentDate)

/* For current date */
$('<%= txtDatePicker.ClientID %>').datepicker({
minDate: 0

Run your project or HTML page to check and enjoy... Happy coding... :)


Post a Comment

Popular Posts