disabling and re-enabling disabled(Single/Multiple) dates in datepicker

Here i’ll be discussing about disabling and re-enabling disabled(Single/Multiple) dates in datepicker:

Make sure to notice * followed by number in this document (eg: *10)

Step 1:(Include js & css files)

//i’ve used multidatespicker plugin for multiple dates selection

http://code.jquery.com/ui/1.9.2/jquery-ui.js
http://multidatespickr.sourceforge.net/jquery-ui.multidatespicker.js
<link rel=”stylesheet” href=”http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css&#8221; />

Step 2: (Create div & 2 text inputs)

//for a sake we shall remember this text inputs as

<input type=”text” id=”availabledate” /> // textbox1
<input type=”text” id=”removedates” /> // textbox2

// textbox1 is used for saving dates to db
// textbox2 is used for getting selected disabled date in calendar

step 3:(Loading dates in datepicker)

Here i’ll be using Ajax calls for getting dates from db

$(function () {
getdates(); *1 // Calling Function
});

function getdates() {
$.ajax({
type: “POST”,
url: “/Home/GetDates”, *2 // Make sure u have to use small letters
data: ”,
success: function (data) *3 { //Dates Will be returned
debugger;
var today = new Date(); // Getting present date
$(‘#calendar’).multiDatesPicker({
altField: ‘#availabledate’, // Assigning selected dates to textbox1
dateFormat: ‘dd/mm/yyyy’, // Assigning date format
beforeShowDay: function (date) {
var dmy = date.getDate() + “/” + (date.getMonth() + 1) + “/” + date.getFullYear(); // converting present date to dd/MM/yyyy format
// By using below condition the dates which are returned from db will get disabled in calendar
// it will be comparing with every date of current month
if ($.inArray(dmy, data) == -1) {
return [true, “”];
} else {
return [false, “myclass”, “Unavailable”]; //if the date is present in list of dates it’ll be changed to unselectable state and myclass will gets appended means we cannot select date
}
}
});
},
dataType: “json”,
traditional: true,
});
}

//Make disabled dates different with other dates by adding color
<style>
.ui-datepicker td.myclass > span {
background: green;
font-size: large;
color: black;
}
</style>

// Now we have finished with disabling dates in datepicker

Step 4:(Now,the Game Starts)
// Re-enabling the disabled date in datepicker
// For this Requirement it has taken more development hours than expected
// Here, the disabled dates will get converted to <span>

$(“body”).on(‘click’, “.ui-datepicker td.myclass > span”, function () { //invokes when clicked on disabled date in calendar
var month = getmonthnumber($(‘span.ui-datepicker-month’).text()); *4 //getting current month number
var date = new Date(); // Getting present date
var value = $(this).html() + “/” + month + “/” + $(‘span.ui-datepicker-year’).text(); *5 // converting present date to dd/MM/yyyy format
$(“#remove”).css(‘display’, ‘block’);
$(this).css(‘background’, ‘red’);
$(‘#removedates’).val(value);
appendWords(this); // “this” is used to get selected <td> tag instance
});

function getmonthnumber(month) {
var collection = [“”, “January”, “February”, “March”, “April”, “May”, “June”, “July”, “August”, “September”, “October”, “November”, “December”];
return collection.indexOf(month);
}

function appendWords(t) {
var flag = true;
var resultObj = $(“#availabledate”); // Assigning list of selected disabled dates
var outputObj = $(“#removedates”); // Assigning Particular selected disabled date
var testing = resultObj.val().split(“,”); // Splitting list of dates

for (var i = 0; i < testing.length; i++) {
if (testing[i] == outputObj.val()) { // if selected disabled date is selected again this condition will be satisfied in order to eradicate duplicates
flag = false; // flag will be falsed below if condition will not satisfy if flag is false
$(t).css(‘background’, ‘green’); // backgrond color of selected disabled date will be changed
var index = testing[i].indexOf(outputObj.val()); // getting index of selected disabled date
if (index > -1) {
testing.splice(i, 1); // Removes selected disabled date from array
var stringToAppend = testing; // Assigning array to a variable
resultObj.val(stringToAppend + ”); // Assigning variable value to textbox1
}
}
}

if (flag) {
var stringToAppend = resultObj.val().length > 0 ? resultObj.val() + “,” : “”; // Gets Already Selected Dates from textbox1
resultObj.val(stringToAppend + outputObj.val()); // Appending Current Selected date to textbox1
}
}

//use textbox1 value to remove dates from db.
//Game Ended Now you can able to remove selected disabled date

// Here i’ve performed operations only for current month
//If you want to perform same operations for multiple months at a time then use minDate,maxDate options inside datepicker
Noted Points(*) marked description:
1) Calling seperate Function is better than writing all stuff in load in order to maintain clean code.
2) In Ajax make sure to use small letters for url if any capital letter is used it may result in failure
3) Make sure u return only dates
4) $(‘span.ui-datepicker-month’).text() will be getting the month which is displayed on datepicker
5) $(‘span.ui-datepicker-year’).text() will be getting the year which is displayed on datepicker

Enhancements:
1) If u want to change the colour of selected date not selected disabled date then use
<style>
.ui-datepicker td span, .ui-datepicker td a {
padding: 20px 15px !important;
background-color: white;
}

.ui-widget-content .ui-state-highlight {
border: 2px solid #d3d3d3;
background: #F6F79F;
}
</style>

//That’s All Buddy Have a nice day

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s