Question

我在互联网上找到了一个函数，用于验证我的datepicker函数的日期范围，它与.checkin和.checkout一起使用我想设置为id（#checkin和#checkout）我知道我必须使用.checkin更改.checkout和#checkin ...但问题在于getMaxDate和getMinDate函数我有一些js函数不知道它是什么例如parentNode.querySelector和.className..how我可以调整我的函数#id吗？

and click to see my project on codepen

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

您正在为字段上的每个focus事件创建一个新的pickaday实例。那可能永远不会奏效。

所以我做的是：

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

这是：

＆＃13;

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

＆＃13;

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

＆＃13;

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

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更改类参数

2 个答案: