Question

希望一切顺利，我需要一个关于HTML5日期字段的小帮助，

我有三个html日期选择器名称batch start date，batch end date，Assessment date，如下所示。

Batch start date:- <input type="date"  required name="batch_startdate" id="textfield7"/>

Batch End date:- <input type="date" required name="batch_Enddate" id="textfield8"/>

Assessment date:- <input type="date" name="Ass_Date" id="textfield9"/>

我的要求是 - 用户无法在批量开始日期中选择批次结束日期的上一个日期，并且评估日期的日期大于批次结束日期，

例如： - 假设批次开始日期是： - 20-03-2017 批次结束日期永远不低于20-03-2017，评估日期也不低于批次结束日期选择的日期。

是否有可能在html5日期选择器？任何帮助都会感激，谢谢你提前。

Answer 1

你可以用javascript

来做

document.getElementById('textfield7').onchange = function () {
    document.getElementById('textfield8').setAttribute('min',  this.value);
    document.getElementById('textfield9').setAttribute('min',  this.value);
};

Demo Here

重要说明：始终在服务器端验证。在客户端验证只会是危险的。

另请注意，您必须检查这两个字段中已选择的日期是否有效。上面的代码不会检查它是否只是更改了min属性。

编辑：以下代码检查已选择的日期是否有效。

document.getElementById('textfield7').onchange = function () {
    var textfield8 = document.getElementById('textfield8');
    var textfield9 = document.getElementById('textfield9');
    textfield8.setAttribute('min',  this.value);
    textfield9.setAttribute('min',  this.value);
    if (textfield8.value !='' && textfield8.value < this.value){
        textfield8.value=this.value;
    }
    if (textfield9.value !='' && textfield9.value < this.value){
        textfield9.value=this.value;
    }
};

Demo Here

html日期选择器根据第一个日期字段中的选定日期限制第二个日期字段中的日期

1 个答案: