使用 id 更改 class 参数

Question

我在互联网上找到了一个函数来验证我的日期选择器函数的日期范围，它与 .checkin 和 .checkout 一起工作我想设置为 id( #checkin 和 #checkout) 而且我知道我必须用 #checkin 更改 .checkin 和 .checkout... 但问题是 getMaxDate 和 getMinDate 函数有一些我不知道的 js 函数它是什么，例如 parentNode.querySelector 和 .className..我如何调整我的函数以适应 #id？

and click to see my project on codepen

$(document).on('focus', '.checkin, .checkout', function (){
    return new Pikaday({
   numberOfMonths: 2,
   field: this,
   format: "DD.MM.YYYY",
   minDate: getMinDate(this),
   firstDay: 1,
   i18n: {
    previousMonth: "Önceki Ay",
    nextMonth: "Sonraki Ay",
    months: ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık"],
    weekdays: ["Pazar", "Pazartesi", "Salı", "Çarşamba", "Perşembe", "Cuma", "Cumartesi"],
    weekdaysShort: ["Paz", "Pzt", "Sa", "Ça", "Pe", "Cu", "Cum"]
   },
   maxDate: getMaxDate(this),
   onSelect: function() {
    e = this.getDate();
   }
  });
});
function getMaxDate(element){
  if(element.className=='checkout' && element.parentNode.querySelector('.checkin').value)
    return new Date(new Date(element.parentNode.querySelector('.checkin').value).getTime()+(15*24*60*60*1000));
else
  return new Date(2020, 12, 31);
  }
function getMinDate(element){
  if(element.className=='checkout' && element.parentNode.querySelector('.checkin').value)
    return new Date(element.parentNode.querySelector('.checkin').value);
  else
  return new Date();
  }

.line{
 width:100%;
 height:10px;
 background:red;
 margin:10px 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/css/pikaday.min.css" rel="stylesheet"/>
<div class="form">
<input type="text" class="checkin" placeholder="Checkin" />
<input type="text" class="checkout" placeholder="Checkout" />
</div>

<div class="line"></div>

<div class="form">
<input type="text" id="checkin" placeholder="Checkin" />
<input type="text" id="checkout" placeholder="Checkout" />
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/pikaday.min.js"></script>

Answer 1

好的，最初的问题是最小的。那时我没有意识到另一个主要问题：

您正在为字段中的每个 focus 事件创建一个新的 pickaday 实例。那永远行不通。

所以我所做的是：

我创建了一个基于选择器实例化的函数（来自您的旧函数）。
我运行在页面加载时在两个输入上运行。
完成！一切都按预期工作。
此外，我简化了配置对象、标记和 js 以使用 ids

这里是：

$(window).on('load', function() {
    var picker = function(selector) {
            return new Pikaday({
                numberOfMonths: 2,
                field: $(selector)[0],
                format: "DD.MM.YYYY",
                minDate: getMinDate($(selector)[0]),
                maxDate: getMaxDate($(selector)[0]),
                firstDay: 1,
                i18n: {
                    previousMonth: "Önceki Ay",
                    nextMonth: "Sonraki Ay",
                    months: ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık"],
                    weekdays: ["Pazar", "Pazartesi", "Salı", "Çarşamba", "Perşembe", "Cuma", "Cumartesi"],
                    weekdaysShort: ["Paz", "Pzt", "Sa", "Ça", "Pe", "Cu", "Cum"]
                },
                onSelect: function() {
                    e = this.getDate();
                }
            });
        },  
        checkout = picker('#checkout'),
        checkin = picker('#checkin');
});

function getMaxDate(element) {
    if (element.getAttribute('id') == 'checkin' && element.value)
        return new Date(new Date(element.value).getTime() + (15 * 24 * 60 * 60 * 1000));
    else
        return new Date(2020, 12, 31);
}

function getMinDate(element) {
    if (element.getAttribute('id') == 'checkout' && element.value)
        return new Date(element.value);
    else
        return new Date();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/pikaday.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/css/pikaday.css" rel="stylesheet"/>
<div class="form">
<input type="text" id="checkin" placeholder="Checkin" />
<input type="text" id="checkout" placeholder="Checkout" />
</div>

还请考虑当前标记。这就是您所需要的。

Answer 2

欢迎来到jQuery！

getMaxDate 和 getMinDate

的变化

function getMaxDate(element) {
    if ($(element).hasClass('checkout') && $(element).parent('.checkin').val())
        return new Date(new Date($(element).parent('.checkin').val()).getTime() + (15 * 24 * 60 * 60 * 1000));
    else
        return new Date(2020, 12, 31);
}

function getMinDate(element) {
    if ($(element).hasClass('checkout') && $(element).parent('.checkin').val())
        return new Date($(element).parent('.checkin').val());
    else
        return new Date();
}

您正在调用的函数的变化

$(document).on('focus', '.checkin, .checkout', function() {
    return new Pikaday({
        numberOfMonths: 2,
        field: this,
        format: "DD.MM.YYYY",
        minDate: getMinDate($(this).attr('id')), //Change here
        firstDay: 1,
        i18n: {
            previousMonth: "Önceki Ay",
            nextMonth: "Sonraki Ay",
            months: ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık"],
            weekdays: ["Pazar", "Pazartesi", "Salı", "Çarşamba", "Perşembe", "Cuma", "Cumartesi"],
            weekdaysShort: ["Paz", "Pzt", "Sa", "Ça", "Pe", "Cu", "Cum"]
        },
        maxDate: getMaxDate($(this).attr('id')), //Change here
        onSelect: function() {
            e = this.getDate();
        }
    });
});

使用 id 更改 class 参数

Changing class parameter with id

javascript

jquery

html

datepicker

date-range