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 - 使用 WebScriptEndpoint 使用 javascript 使用 WCF 服务
我在网上搜索但没有找到任何合适的文章解释如何使用 javascript 使用 WCF 服务，尤其是 WebScriptEndpoint。任何人都可以对此给出任何指导吗？谢谢最佳答案这是一篇关于
c - 没有结果!!使用 fork() 使用 dup2 使用 2 个管道运行 execlp()
我正在编写一个将运行 Linux 命令的 C 程序，例如: cat/etc/passwd | grep 列表 |剪切-c 1-5 我没有任何结果 *这里 parent 等待第一个 child (chi
python - 处理文件上传，使用 Pillow 调整大小，使用 SQLAlchemy 存储，使用 Flask 提供文件
所以我正在尝试处理文件上传，然后将该文件作为二进制文件存储到数据库中。在我存储它之后，我尝试在给定的 URL 上提供文件。我似乎找不到适合这里的方法。我需要使用数据库，因为我使用 Google 应用引
excel - 使用 IF 使用 VBA 在单元格中添加公式的问题
我正在尝试制作一个宏，将下面的公式添加到单元格中，然后将其拖到整个列中并在 H 列中复制相同的公式我想在 F 和 H 列中输入公式的数据 Range("F1").formula = "=IF(ISE
使用 OperatorPrecedenceParser 使用 FParsec 解析函数应用程序？
问题类似于this one ，但我想使用 OperatorPrecedenceParser 解析带有函数应用程序的表达式在 FParsec . 这是我的 AST: type Expression =
sql - 使用 sequelize 使用 where 查询编码计数
我想通过使用 sequelize 和 node.js 将这个查询更改为代码取决于在哪里 select COUNT(gender) as genderCount from customers where
bash - 使用 “let”分配Bash失败，使用 “/”
我正在使用GNU bash，版本5.0.3(1)-发行版(x86_64-pc-linux-gnu)，我想知道为什么简单的赋值语句会出现语法错误: #/bin/bash var1=/tmp
javascript - 使用 JavaScript 使用 FOR OF 数组循环时出现错误？
这里，为什么我的代码在 IE 中不起作用。我的代码适用于所有浏览器。没有问题。但是当我在 IE 上运行我的项目时，它发现错误。而且我的 jquery 类和 insertadjacentHTMl 也不
javascript - 使用 javascript 使用 for 属性更改表单标签内容
我正在尝试更改标签的innerHTML。我无权访问该表单，因此无法编辑 HTML。标签具有的唯一标识符是“for”属性。这是输入和标签的结构:
javascript - 使用 jquery 使用 .on() 将事件附加到页面上的动态插入按钮
我有一个页面，我可以在其中返回用户帖子，可以使用一些 jquery 代码对这些帖子进行即时评论，在发布新评论后，我在帖子下插入新评论以及删除按钮。问题是 Delete 按钮在新插入的元素上不起作用，
使用 awk 使用 sha1sum 进行散列
我有一个大约有 20 列的“管道分隔”文件。我只想使用 sha1sum 散列第一列，它是一个数字，如帐号，并按原样返回其余列。使用 awk 或 sed 执行此操作的最佳方法是什么？ Accounti
mysql - 使用 insert into 使用 mysql
我需要将以下内容插入到我的表中...我的用户表有五列 id、用户名、密码、名称、条目。 (我还没有提交任何东西到条目中，我稍后会使用 php 来做)但由于某种原因我不断收到这个错误:#1054 - U
jquery - 将输入字段值修剪为仅字母数字字符/使用 .使用 jQuery
所以我试图有一个输入字段，我可以在其中输入任何字符，但然后将输入的值小写，删除任何非字母数字字符，留下“。”而不是空格。例如，如果我输入: 地球的 70% 是水，-!*#$^^ & 30% 土地输
javascript - 使用 .innerHTML 使用 DOM
我正在尝试做一些我认为非常简单的事情，但出于某种原因我没有得到想要的结果？我是 javascript 的新手，但对 java 有经验，所以我相信我没有使用某种正确的规则。这是一个获取输入值、检查选择
php - 使用 angularjs 使用 where 子句从数据库获取数据
我想使用 angularjs 从 mysql 数据库加载数据。这就是应用程序的工作原理；用户登录，他们的用户名存储在 cookie 中。该用户名显示在主页上我想获取这个值并通过 angularjs
ios - 使用 UITableViewCell 使用 AutoLayout
我正在使用 autoLayout，我想在 UITableViewCell 上放置一个 UIlabel，它应该始终位于单元格的右侧和右侧的中心。这就是我想要实现的目标所以在这里你可以看到我正在谈论的
mysql - 使用 ElasticSearch 使用 or 和运算符搜索多个字段
我需要与 MySql 等效的 elasticsearch 查询。我的 sql 查询: SELECT DISTINCT t.product_id AS id FROM tbl_sup_price t
ios - 使用 Swift 使用 JSON
我正在实现代码以使用 JSON。 func setup() { if let flickrURL = NSURL(string: "https://api.flickr.com/
javascript - 使用 JavaScript 使用 for 循环声明变量
我尝试使用for循环声明变量，然后测试cols和rols是否相同。如果是，它将运行递归函数。但是，我在 javascript 中执行 do 时遇到问题。有人可以帮忙吗？现在，在比较 col.1 和
jquery - 使用 :after 使用 jquery 更改样式
我举了一个我正在处理的问题的简短示例。 HTML代码: 1 2 3 CSS 代码: .BB a:hover{ color: #000; } .BB > li:after {

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城