I have a calendar which is an HTML construction using a PHP/MySQL database source. The calendar is output as a month at a time with a list out of booked dates, past dates and future dates and the current day. My aim is for customers to use the calendar to select the START and the END date of their holiday.
I currently use PHP 5.5 and HTML5, CSS 3 and JQuery 1.11.0. My current code is in a JSFiddle at https://jsfiddle.net/rs7mcoo9/4/
What the Calendar currently does:
My calendar currently has each day in the month a DIV tag which contains two pieces of custom date - a date value as a timestamp and a date value as a human text. When an available date is clicked the date is coloured Green and the date text is shown - via JQuery - in the booking form field.
What I Want the Calendar to do:
What I am looking for is something where the first date of the calendar is clicked and the date is displayed in the booking form as happens already, but then when the second date is clicked on the calendar then each date between the two shows a CSS rule of green days, give a clear and concise definition to the user what dates they have selected, so for example if the 1st is clicked and then the 4th is clicked, then the 1st,2nd,3rd and 4th calendar divs are shaded to show these would be the selected ones.
I envisage this problem can be solved with using JQuery to change the CSS setting of the various selected dates on the calendar but my issue is that I can't find a neat way of selecting the correct dates that would need to be changed upon mouse hovering over a later date once the first start date has been set.
How Have I tried to solve my problem
I have looked at the http://multidatespickr.sourceforge.net/ and http://stefangabos.ro/jquery/zebra-datepicker/ date picking UIs but these do not do what I want, they make the user have to click each individual day they require rather than selecting all the dates between a START and END date.
I have also looked at some other SO questions such as p:calender multiple date selection but these have not helped me get a grip on how to start this functionality.
Working Example
I have a working example of my current setup at: https://jsfiddle.net/rs7mcoo9/4/ . Please note in this setup that the date clearance buttons "clear" do not function.
Each date that is available for booking has two custom values set into its DIV:
<td class="provbook" title='Sunday, September 13, 2015 (available - click to book)'>
<div data-value='13th September 2015' data-core='20150913'>13</div>
</td>
The date-core value is set as YMD so should be easy to work out dates after/before numerically. My current JQuery is:
$(document).ready(function() {
$("#mailbox").css("display","block");
$('td > div').on('click', function() {
$('#mailbox').show(360);
$(this).toggleClass( "dateChoice" )
var dateValueOutput = $(this).attr('data-value');
var dataCore = parseInt($(this).attr('data-core'));
var checkDataA = parseInt($('#coreDateA').val());
if (isNaN(checkDataA)) {
checkDataA = 0;
$('#coreDateA').val();
}
var checkDataB = parseInt($('#coreDateB').val());
if (isNaN(checkDataB)) {
checkDataB = 0;
$('#coreDateB').val();
}
if (dataCore < checkDataA || checkDataA == 0 ) {
$('#bookDatesa').val(dateValueOutput);
$('#coreDateA').val(dataCore);
}
else {
$('#bookDates').val(dateValueOutput);
$('#coreDateB').val(dataCore);
}
/** If input box is empty then also clear hidden field **/
/** change CSS of selected boxes, for start/finish **/
/** so If css colour is set, change to clear etx. **/
});
});
Next Steps
I would like to use JQuery to achieve the interactivity I would like, I need some help to getting a start to how to get my JQuery/javascript to approach this issue. How can I achieve my aims, with my somewhat perfunctory knowledge of JQuery, specifically I'm looking for the syntax to use so that any DIV date-core value that is equal or above the primary date (var checkDataA) and less than the 2nd date selected, and for these chosen cells / DIVS to apply a custom CSS class.
Many thanks for any help!!
UPDATE
Basically I would like a way to have CSS rules applied to all the DIV tags which fall between to (date) values whereby the values are recorded in data-core within the DIV element.
So If someone clicks on the 13th day of a month (20151013) and the 18th Day of a month (20151018) then the DIVs which contain data-core values between these two dates all get extra CSS rules applied to them via Javascript.
Many thanks
