双日期选择器 jQuery 选择

问题描述 投票:0回答:1

我正在从头开始构建一个日期选择器作为学习练习。我的日期选择器有两个月并排,我的问题是,jQuery 看起来像什么来选择开始日期和结束日期,允许用户改变主意并让两个日期在同一个月或相反几个月?

我的 HTML

<div class="calendar left">
    <div class="calendar-days">
        <div class="calendar-day" day="1">1</div>
        <div class="calendar-day" day="2">2</div>   
        <div class="calendar-day" day="3">3</div>
        <div class="calendar-day" day="4">4</div>
        <div class="calendar-day" day="5">5</div>
        ...
        ...
    </div>
</div>
<div class="calendar right">
    <div class="calendar-days">
        <div class="calendar-day" day="1">1</div>
        <div class="calendar-day" day="2">2</div>   
        <div class="calendar-day" day="3">3</div>
        <div class="calendar-day" day="4">4</div>
        <div class="calendar-day" day="5">5</div>
        ...
        ...
    </div>
</div>

假设左月是8月,右月是9月...他们可以选择开始日期8月5日和结束日期8月17日,或者开始日期8月5日和结束日期9月22日,或者开始日期9月8日和结束日期9月12日等等...共有三种情况。

通过单击事件可以明显选择开始日期,并将选定的课程添加到该天。但是,如何在两个日历中的任何给定时间只允许选择两天?

javascript css datepicker
1个回答
0
投票

如果我理解正确的话,您希望将日期选择限制为两个。 您可以通过验证事件处理程序内的条件来做到这一点:

$(document).ready(function(){
    $(".calendar-day").on("click", function(){
    if($(".selected").length<2){
        $(this).addClass("selected");
    }
  })
})

请注意,我使用了您将所选课程添加到日期的想法。

此代码不会对开始日期是否晚于结束日期进行任何验证,但是您可以使用 jquery 事件处理程序中的基本 js if 条件来实现这一点,这不是 jquery 事件处理。

希望这有帮助!

© www.soinside.com 2019 - 2024. All rights reserved.