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

转载作者：行者123 更新时间：2023-11-29 14:48:27

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

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

日历目前的作用:

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

我希望日历做什么:

我正在寻找的是点击日历的第一个日期并且日期显示在预订表格中的东西，但是当点击日历上的第二个日期时，之间的每个日期这两个 显示了 green days 的 CSS 规则，为用户提供了他们选择的日期的清晰简洁的定义，例如，如果单击第 1 个，然后单击第 4 个，则第 1、2、第 3 个和第 4 个日历 div 有阴影以显示这些将被选中。

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

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

我看过 http://multidatespickr.sourceforge.net/和 http://stefangabos.ro/jquery/zebra-datepicker/日期选择用户界面，但这些并不能满足我的要求，它们使用户必须单击他们需要的每一天，而不是选择开始日期和结束日期之间的所有日期。

我还查看了其他一些 SO 问题，例如 p:calender multiple date selection但是这些并没有帮助我掌握如何启动此功能。

工作示例

我有一个当前设置的工作示例: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) 并且小于所选的第二个日期，并为这些选定的单元格/DIVS 应用自定义 CSS 类。

非常感谢您的帮助!!

更新

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

非常感谢

最佳答案

在你改变了 coreDateA 和 coreDateB 的值之后，你可以在使用 each 函数和一个条件语句。只需在 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");
});

演示

$(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>

关于javascript - 使用 Javascript 从日历中选择多个日期，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29630754/

文章推荐： Android无法更新mysql数据库中的表

文章推荐： javascript - 在设定时间禁用/启用色带

文章推荐： php - 尝试使用 PHP 创建动态生成的 mySQL select 语句

javascript - 执行存在于输入值字段中的 javascript - JavaScript
我有一个 html 格式的表单: 我需要得到 JavaScript在value input 字段执行，但只能通过表单的 submit .原因是页面是一个模板所以我不控制它(不能有
javascript - JavaScript 代码片段正在破坏其他 JavaScript
我管理的论坛是托管软件，因此我无法访问源代码，我只能向页面添加 JavaScript 来实现我需要完成的任务。我正在尝试用超链接替换所有页面上某些文本关键字的第一个实例。我还根据国家/地区代码对这些
javascript - JavaScript 如何使新页面包含更多 JavaScript？
我正在使用 JS 打开新页面并将 HTML 代码写入其中，但是当我尝试使用 document.write() 在新页面中编写 JS 时功能不起作用。显然，一旦看到，主 JS 就会关闭。用于即将打开的
javascript - Javascript 引擎如何在浏览器中执行 Javascript？
提问不是为了解决问题，提问是为了更好地理解系统专家!我知道每当你将 javascript 代码输入 javascript 引擎时，它会立即由 javascript 引擎执行。由于没有看过Engi
javascript - 如何将 JavaScript 变量从一个 JavaScript 文件传递到另一个 JavaScript 文件？
我在一个文件夹中有两个 javascript 文件。我想将一个变量的 javascript 文件传递到另一个。我应该使用什么程序？最佳答案 window.postMessage用于跨文档消息。使
javascript - javascript 中的 javascript 输入问题
我有一个练习，我需要输入两个输入并检查它们是否都等于一个。如果是 console.log 正则 console.log false 我试过这样的事情: function isPositive(fir
javascript - 在加载其他 javascript 库的页面上嵌入 Javascript？
我正在做一个Web应用程序，计划允许其他网站(客户端)在其页面上嵌入以下javascript: 我的网络应用程序位于 http://example.org 。我不能假设客户端网站的页面有 JQue
javascript - 从 Javascript 内部调用 Javascript
目前我正在使用三个外部 JS 文件。我喜欢将所有三个 JS 文件合而为一。尽一切可能。我创建 aio.js 并在 aio.js 中 src="https://code.jquery.com/
javascript - AngularJS/javascript javascript 对象的特殊排序顺序
我有例如像这样的数组: var myArray = []; var item1 = { start: '08:00', end: '09:30' } var item2 = {
javascript - 在 Javascript 内部执行 Javascript？
所以我正在制作一个 Chrome 扩展，它使用我制作的一些 TamperMonkey 脚本。我想要一个“主”javascript 文件，您可以在其中包含并执行其他脚本。我很擅长使用以下行将其他 jav
javascript - 如何将变量从 javascript 移动到 javascript？
我有 A、B html 和 A、B javascript 文件。并且，如何将 A JavaScript 中使用的全局变量直接移动到 B JavaScript 中？示例 JavaScript) va
javascript - 从 javascript 调用 javascript
我需要将以下整个代码放入名为 activate.js 的 JavaScript 中。你能告诉我怎么做吗？ var int = new int({ seconds: 30, mark
javascript - 将变量值从一个 JavaScript 传递到另一个 JavaScript
我已经为我的 .net Web 应用程序创建了母版页 EXAMPLE1.Master。他们的 I 将值存储在 JavaScript 变量中。我想在另一个 JS 文件中检索该变量。示例1.大师:-
javascript - 有没有开源库可以在浏览器中使用 Javascript 来整理 Javascript？
是否有任何库可以用来转换这样的代码: function () { var a = 1; } 像这样的代码: function () { var a = 1; } 在我的浏览器中。因为我在 Gi
javascript - javascript 中的参数列表后缺少语法 javascript 错误 )
我收到语法缺失 ) 错误 $(document).ready(function changeText() { var p = document.getElementById('bidp
javascript - 第一个 JavaScript 完成后启动第二个 JavaScript
我正在制作进度条。它有一个标签。我想调整某个脚本完成的标签。在找到可能的解决方案的一些答案后，我想出了以下脚本。第一个启动并按预期工作。然而，第二个却没有。它出什么问题了？代码如下: HTML:
javascript - 为什么外部 javascript 库会阻止我页面上的 javascript？
这里有一个很简单的问题，我简单的头脑无法回答:为什么我在外部库中加载时，下面的匿名和onload函数没有运行？我错过了一些非常非常基本的东西。 Library.js 只有一行:console.log(
javascript - 如何区分代码内 javascript 和客户端 javascript
我知道 javascript 是一种客户端语言，但如果实际代码中嵌入的 javascript 代码以某种方式与在控制台上运行的代码不同，我会尝试找到答案。让我用一个例子来解释它: 我想创建一个像 Mi
javascript - 将 Javascript 内联到不显眼的 JavaScript？
我如何将这个内联 javascript 更改为 Unobtrusive JavaScript？谢谢! 感谢您的回答，但它不起作用。我的代码是: PHP js文件 document.getElem
javascript - 如何将 JavaScript 对象导出为 JavaScript？
我正在寻找将简单的 JavaScript 对象“转储”到动态生成的 JavaScript 源代码中的最优雅的方法。目的:假设我们有 node.js 服务器生成 HTML。我们在服务器端有一个对象x。

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城