jQuery的日期選擇器有限公司以另一個日期選擇器

的月和年我有一個問題。我需要一個會限制用戶選擇日期的日期選擇器。jQuery的日期選擇器有限公司以另一個日期選擇器

所以是這樣的：

1）首先輸入，我應該能挑到我想要的日，月，年。

2）第二個輸入，我應該能夠挑一個日子，如果它比第一個輸入的日子時，同月/年的第一個輸入的。否則提醒一個錯誤。

var dates = $("input[id$='startDate'], input[id$='endDate']").datepicker({ 
    dateFormat: 'dd/mm/yy', 
    changeMonth: true, 
    changeYear: true, 
    onSelect: function (selectedDate) { 
     var option = this.id == $("input[id$='startDate']")[0].id ? "minDate" : "maxDate", 
     instance = $(this).data("datepicker"), 
     date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings); 
     dates.not(this).datepicker("option", option, date); 
     } 
    });

來源

2016-08-12 Zirbo Filip

哪個日期選擇您使用？你試過了什麼，你在哪裏被卡住了？顯示一些代碼。 –

你找到任何解決方案，也有你試過下面，如果它工作我的答案。 – GauravKP

我在度假，現在正在嘗試。謝謝，我會及時更新，大家我 –

@Gaurav P給了我一個提示，但我必須做一些修改，以便代碼正常工作。

下面是代碼：

var txtTranDate = $("input[id$='startDate']"); 

var txtTranDateTo = $("input[id$='endDate']"); 

txtTranDate.datepicker({ 
    defaultDate: 0, 
    changeMonth: true, 
    changeYear: true, 
    dateFormat: 'dd/mm/yy' 
}).on("change", function() { 
    var date = this.value; 
    var values = date.split("/"); 
    var lastDate = new Date(values[2], values[1] - 1, daysInMonth(values[1], values[2])); 
    var formatted = $.datepicker.formatDate("dd/mm/yy", lastDate); 
    txtTranDateTo.datepicker("option", "minDate", getDate(this)); 
    txtTranDateTo.datepicker("option", "maxDate", formatted); 
}); 

txtTranDateTo.datepicker({ 
    defaultDate: 0, 
    changeMonth: true, 
    changeYear: true, 
    dateFormat: 'dd/mm/yy', 
    numberOfMonths: 1 
}).on("change", function() { 

}); 

function getDate(element) { 
    var date; 
    try { 
     date = $.datepicker.parseDate('dd/mm/yy', element.value); 
    } catch (error) { 
     date = null; 
    } 

    return date; 
}

來源

2016-08-17 08:32:37

下面將工作按照您的要求：

var txtTranDate = $("#startDate"); 

var txtTranDateTo = $("#endDate"); 

txtTranDate.datepicker({ 
    defaultDate: 0, 
    changeMonth: true, 
    changeYear: true, 
    dateFormat: dateFormat, 
    maxDate: 0, 
    numberOfMonths: 1 
}).on("change", function() { 
    var dcal = getDate(this); 
    if (txtTranDate.val() !== '' && dcal === null) { 
     txtTranDate.prop("value", ""); 
     txtTranDateTo.prop("value", ""); 
    } else { 
     txtTranDateTo.datepicker("option", "minDate", getDate(this)); 
    } 
}); 

txtTranDateTo.datepicker({ 
    defaultDate: 0, 
    changeMonth: true, 
    changeYear: true, 
    maxDate: 0, 
    dateFormat: dateFormat, 
    numberOfMonths: 1 
}).on("change", function() { 
    var dcal = getDate(this); 
    if (txtTranDateTo.val() !== '' && dcal === null) { 
     txtTranDate.prop("value", ""); 
     txtTranDateTo.prop("value", ""); 
    } else { 
     txtTranDate.datepicker("option", "maxDate", getDate(this)); 
    } 
});

UPDATE方法來檢查是否輸入有效的日期

function getDate(element) { 
    var date; 
    try { 
     date = $.datepicker.parseDate(dateFormat, element.value); 
    } catch (error) { 
     date = null; 
    } 

    return date; 
}

來源

2016-08-12 09:11:45 GauravKP

仍然可以選擇其他月份的第二次約會。我會自己解決這個問題並提出解決方案 –

這也將工作，只要編輯你的一些代碼。 http://jsfiddle.net/wc6jcpka/2/

$(function(){ 

var dates = $("input[id$='startDate'], input[id$='endDate']").datepicker({ 
    dateFormat: 'dd/mm/yy', 
    changeMonth: true, 
    changeYear: true, 
    onSelect: function (selectedDate) { 

     var endDateInput = $("#endDate").val(); 
     var startDateInput = $("#startDate").val(); 
     if(endDateInput != '' && startDateInput != ''){ 
      var endDate = new Date(); 
      endDate.setMonth (parseInt(endDateInput.substr(3, 6), 10) - 1); 
      endDate.setDate (parseInt(endDateInput.substr(0, 3), 10)); 
      endDate.setYear (parseInt(endDateInput.substr(6, 10), 10)); 
      var startDate = new Date(); 
      startDate.setMonth (parseInt(startDateInput.substr(3, 6), 10) - 1); 
      startDate.setDate (parseInt(startDateInput.substr(0, 3), 10)); 
      startDate.setYear (parseInt(startDateInput.substr(6, 10), 10)); 
       if(startDate.getDate() >= endDate.getDate() || startDate.getMonth() != endDate.getMonth() || startDate.getYear() != endDate.getYear()){ 
       alert("Error"); 
       } 
     } 
    } 
});

}）;

來源

2016-08-17 12:19:56 JaredT

jQuery的日期選擇器有限公司以另一個日期選擇器

回答

相關問題