使用Javascript从日历中选择多个日期

Question

我有一个日历，这是一个使用PHP / MySQL数据库源的HTML结构。 日历一次输出一个月，其中包含预订日期，过去日期和未来日期以及当天的列表。 我的目标是让客户使用日历来选择假期的开始日期和结束日期。

我目前使用PHP 5.5和HTML5，CSS 3和JQuery 1.11.0。 我当前的代码在JSFiddle中，位于https://jsfiddle.net/rs7mcoo9/4/

日历目前的作用：

我的日历当前每月都有一个DIV标记，其中包含两个自定义日期 - 日期值作为时间戳，日期值作为人类文本。 单击可用日期时，日期显示为绿色，日期文本显示 - 通过JQuery - 在预订表单字段中。

我希望日历做什么：

我正在寻找的是点击日历的第一个日期并且日期显示在预订表格中的情况，但是当在日历上点击第二个日期时， 两者之间的每个日期显示CSS规则绿色的日子，给用户一个清晰简洁的定义他们选择了什么日期，例如，如果单击第一个然后单击第四个，则第一个，第二个，第三个和第四个日历div被加阴影以显示这些将是选定的。

我设想这个问题可以通过使用JQuery来更改日历上各种选定日期的CSS设置来解决，但我的问题是我找不到一种简洁的方法来选择鼠标悬停时需要更改的正确日期一旦设置了第一个开始日期，在以后的日期。

我是如何尝试解决我的问题的？

我查看了http://multidatespickr.sourceforge.net/和http://stefangabos.ro/jquery/zebra-datepicker/日期选择用户界面，但这些没有做我想要的，他们让用户必须点击每个个别日子他们需要而不是选择START和END日期之间的所有日期。

我还看了一些其他的SO问题，比如p：calender多个日期选择，但这些并没有帮助我掌握如何启动这个功能。

工作实例

我有一个当前设置的工作示例： https ： //jsfiddle.net/rs7mcoo9/4/ 。 请注意，在此设置中，日期清除按钮“清除”不起作用。

每个可供预订的日期都有两个自定义值设置到其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>

date-core值设置为YMD，因此应该很容易在数字之后/之前计算日期。 我目前的JQuery是：

$(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. **/
        });
    });

下一步

我想使用JQuery来实现我想要的交互性，我需要一些帮助来开始如何让我的JQuery / javascript来解决这个问题。 我如何实现自己的目标，我对JQuery有点敷衍了解，特别是我正在寻找使用的语法，以便任何DIV date-core值等于或高于主日期（ var checkDataA ）并且小于2选择日期，并为这些选定的单元格/ DIVS应用自定义CSS类。

非常感谢任何帮助!!

UPDATE

基本上我想要一种方法将CSS规则应用于所有DIV标签，这些标签介于（日期）值之间，从而将值记录在DIV元素内的data-core中。 因此，如果有人点击一个月的第13天（20151013）和一个月的第18天（20151018），那么包含这两个日期之间的data-core值的DIV都会通过Javascript获得额外的CSS规则。

非常感谢

Answer 1

在更改了coreDateA和coreDateB的值之后，您可以使用each函数和一个条件语句更改coreDateB所有元素类。 只需在click功能结束时添加此代码click

var i=$("#coreDateA").val();
var j=$("#coreDateB").val()||i;
$("[data-core]").each(function(){
    var timestamp=parseInt($(this).attr("data-core"));
    var flagClass=$(this).hasClass("dateChoice");
    if(timestamp>=i&&timestamp<=j){
        if(!flagClass)
            $(this).addClass("dateChoice");
    }
    else if(flagClass)
         $(this).removeClass("dateChoice");
});    

DEMO

 $(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; } var checkDataB = parseInt($('#coreDateB').val()); if (isNaN(checkDataB)) { checkDataB = 0; } if (dataCore < checkDataA || checkDataA == 0 ) { $('#bookDatesa').val(dateValueOutput); $('#coreDateA').val(dataCore); } else { $('#bookDates').val(dateValueOutput); $('#coreDateB').val(dataCore); } var i=$("#coreDateA").val(); var j=$("#coreDateB").val()||i; $("[data-core]").each(function(){ var timestamp=parseInt($(this).attr("data-core")); var flagClass=$(this).hasClass("dateChoice"); if(timestamp>=i&&timestamp<=j){ if(!flagClass) $(this).addClass("dateChoice"); } else if(flagClass) $(this).removeClass("dateChoice"); }); }); }); 

 .provbook { font-weight: bold !important; color:#009 !important; } .provbook:hover { cursor: pointer; background-color:#11cc33; } .dateChoice, .dateChoice:hover, .dateChoice:focus { background-color:#11dd11 !important; color:#006 !important; } .tariffTable { min-width:320px; width:80%; margin: 0 auto 1em auto; border: 1px solid #AAA; background-color: #FFF; font-size: 0.9em; line-height: 1.3em; border-collapse: collapse; } .calendar { padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 0.9em; min-width: 320px; width:80%; max-width:600px; margin: 0 auto; border: 1px solid #AAA; } .calendar caption { margin: 0; padding: .3em 0; border-top:#006 1px none; border-right:#AAA 1px solid; border-left: #AAA 1px solid; font-weight: bold; background-color: #FFF; color: #000; font-size: 1.05em; } .calendar th { border-bottom: 1px solid #ccc; font-weight: normal; background: #fff; text-align: center; } .calendar td { border: 1px solid #fff; padding: .1em .3em ; width: 1em; text-align: center; } /*.calendar a { color: #000; text-decoration: none; }*/ .calendar td.today { background: #CCC !important; font-weight: normal; color:#333; } /* .calendar td.selected { border: 1px dotted #ff7800; } */ .calendar td.highlighted { background-color: #C6B6AE; font-weight: normal; color:#000; } .calendar td.passed { font-style: italic; font-weight: normal; color:#333; } .highlightedExample { background-color: #C6B6AE; padding:0.15em 0.5em; } /* .calendar td:hover, .calendar td.today:hover, .calendar td.selected:hover, .calendar td.highlighted:hover { border: 1px solid #009999; } */ table.calendar td.pad { color: #999; background: #fff; } table.calendar td.pad:hover { background: none; border: 0; } .tariffTable tr td { padding:0.2em; } .tariffTable th { font-size: 1em; font-weight: bold; color: #000; border-bottom:#AAA 1px solid; padding:0.4em 0.3em; text-align: left; } .tariffTable th:nth-child(n+3), .tariffTable tr td:nth-child(n+3) { text-align: center !important; } .tariffTable tr td { } .tariffTable tr:nth-child(even) { background-color: #DDD; } .tariffTable tr:nth-child(odd) { background-color: #EEE; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <table class='calendar'> <caption>September 2015</caption> <col class='sunday' /> <col class='monday' /> <col class='tuesday' /> <col class='wednesday' /> <col class='thursday' /> <col class='friday' /> <col class='saturday' /> <thead> <tr> <th title='Sunday'>S</th> <th title='Monday'>M</th> <th title='Tuesday'>T</th> <th title='Wednesday'>W</th> <th title='Thursday'>T</th> <th title='Friday'>F</th> <th title='Saturday'>S</th> </tr> </thead> <tbody> <tr> <td class='pad'>&nbsp;</td> <td class='pad'>&nbsp;</td> <td class="highlighted" title='Tuesday, September 1, 2015 (booked)'><div data-value='1st September 2015' data-core='20150901'>01</div></td> <td class="highlighted" title='Wednesday, September 2, 2015 (booked)'><div data-value='2nd September 2015' data-core='20150902'>02</div></td> <td class="highlighted" title='Thursday, September 3, 2015 (booked)'><div data-value='3rd September 2015' data-core='20150903'>03</div></td> <td class="highlighted" title='Friday, September 4, 2015 (booked)'><div data-value='4th September 2015' data-core='20150904'>04</div></td> <td class="highlighted" title='Saturday, September 5, 2015 (booked)'><div data-value='5th September 2015' data-core='20150905'>05</div></td> </tr> <tr> <td class="highlighted" title='Sunday, September 6, 2015 (booked)'><div data-value='6th September 2015' data-core='20150906'>06</div></td> <td class="highlighted" title='Monday, September 7, 2015 (booked)'><div data-value='7th September 2015' data-core='20150907'>07</div></td> <td class="highlighted" title='Tuesday, September 8, 2015 (booked)'><div data-value='8th September 2015' data-core='20150908'>08</div></td> <td class="highlighted" title='Wednesday, September 9, 2015 (booked)'><div data-value='9th September 2015' data-core='20150909'>09</div></td> <td class="highlighted" title='Thursday, September 10, 2015 (booked)'><div data-value='10th September 2015' data-core='20150910'>10</div></td> <td class="highlighted" title='Friday, September 11, 2015 (booked)'><div data-value='11th September 2015' data-core='20150911'>11</div></td> <td class="provbook" title='Saturday, September 12, 2015 (available - click to book)'><div data-value='12th September 2015' data-core='20150912'>12</div></td> </tr> <tr> <td class="provbook" title='Sunday, September 13, 2015 (available - click to book)'><div data-value='13th September 2015' data-core='20150913'>13</div></td> <td class="provbook" title='Monday, September 14, 2015 (available - click to book)'><div data-value='14th September 2015' data-core='20150914'>14</div></td> <td class="provbook" title='Tuesday, September 15, 2015 (available - click to book)'><div data-value='15th September 2015' data-core='20150915'>15</div></td> <td class="provbook" title='Wednesday, September 16, 2015 (available - click to book)'><div data-value='16th September 2015' data-core='20150916'>16</div></td> <td class="provbook" title='Thursday, September 17, 2015 (available - click to book)'><div data-value='17th September 2015' data-core='20150917'>17</div></td> <td class="provbook" title='Friday, September 18, 2015 (available - click to book)'><div data-value='18th September 2015' data-core='20150918'>18</div></td> <td class="provbook" title='Saturday, September 19, 2015 (available - click to book)'><div data-value='19th September 2015' data-core='20150919'>19</div></td> </tr> <tr> <td class="provbook" title='Sunday, September 20, 2015 (available - click to book)'><div data-value='20th September 2015' data-core='20150920'>20</div></td> <td class="provbook" title='Monday, September 21, 2015 (available - click to book)'><div data-value='21st September 2015' data-core='20150921'>21</div></td> <td class="provbook" title='Tuesday, September 22, 2015 (available - click to book)'><div data-value='22nd September 2015' data-core='20150922'>22</div></td> <td class="provbook" title='Wednesday, September 23, 2015 (available - click to book)'><div data-value='23rd September 2015' data-core='20150923'>23</div></td> <td class="provbook" title='Thursday, September 24, 2015 (available - click to book)'><div data-value='24th September 2015' data-core='20150924'>24</div></td> <td class="provbook" title='Friday, September 25, 2015 (available - click to book)'><div data-value='25th September 2015' data-core='20150925'>25</div></td> <td class="provbook" title='Saturday, September 26, 2015 (available - click to book)'><div data-value='26th September 2015' data-core='20150926'>26</div></td> </tr> <tr> <td class="provbook" title='Sunday, September 27, 2015 (available - click to book)'><div data-value='27th September 2015' data-core='20150927'>27</div></td> <td class="provbook" title='Monday, September 28, 2015 (available - click to book)'><div data-value='28th September 2015' data-core='20150928'>28</div></td> <td class="provbook" title='Tuesday, September 29, 2015 (available - click to book)'><div data-value='29th September 2015' data-core='20150929'>29</div></td> <td class="provbook" title='Wednesday, September 30, 2015 (available - click to book)'><div data-value='30th September 2015' data-core='20150930'>30</div></td> <td class='pad'>&nbsp;</td> <td class='pad'>&nbsp;</td> <td class='pad'>&nbsp;</td> </tr> </tbody> </table> <div id='mailbox'> <form action='' method='post' enctype='multipart/form-data' lang='en' name='enqform'> <br>From (<span id='clearFrom'>clear</span>): <input type='text' value='' name='datesa' id='bookDatesa' required> <input type='hidden' value='' name='coreDateA' id='coreDateA'> <input type='hidden' value='' name='coreDateB' id='coreDateB'> To (<span id='clearTo'>clear</span>):<br> <input type='text' value='' name='dates' id='bookDates' required> <input type='submit' value='Send Enquiry' name='submit'> </form> </div> 

Answer 2

以下是选择所选间隔的代码：

var firstDate = $('#coreDateA').val();
var lastDate = $('#coreDateB').val();

if (firstDate && lastDate) {
  //date format is 20150918
  var firstDay = parseInt(firstDate.substring(6));
  var yearAndMonth = firstDate.substring(0,6);
  var lastDay = parseInt(lastDate.substring(6));

  //reset all selections
  $('td > div').removeClass('dateChoice'); 

  for (var i = firstDay; i <= lastDay; i++){
     $('div[data-core="' + yearAndMonth + i +'"]').addClass('dateChoice');
  }
}

这是小提琴，你可以看到工作： https ： //jsfiddle.net/ozsq6wex/3/

但要注意，如果你想选择交叉月份，比如9月开始和10月结束，你需要一个更复杂的逻辑来使它工作