javascript - 在日历中显示有限的日子

Question

下面是我尝试过的代码。

From:<input data-dojo-id="myFromDate" type="text" name="fromDate" id="fromDate" value="" data-dojo-type="dijit/form/DateTextBox" required="true" constraints="{ datePattern: 'MM/dd/yyyy'}"  onChange="myToDate.constraints.min = arguments[0];"/> 

 To:<input data-dojo-id="myToDate" type="text" name="toDate" id="toDate" value="" data-dojo-type="dijit/form/DateTextBox" required="true" constraints="{ datePattern: 'MM/dd/yyyy'}" onChange="myFromDate.constraints.max = arguments[0];" />

 <input type="submit" value="submit"/>

请建议我如何在 fromDate 字段中选择日期后仅启用 future 90 天，以及在 toDate 字段中选择日期时仅启用过去 90 天。

Answer 1

我建议您使用dojo/date进行日期操作，并使用dijit/form/DateTextBox 用于向 DateTextBox 小部件添加约束的约束。

例如

<label for="fromDate">From:</label> 
    <input id="fromDate" data-dojo-type="dijit/form/DateTextBox"
                        data-dojo-props='type:"text", name:"fromDate", required:true,
                        onChange:function(){ 
                            var fromDate = this.get("value");
                            var fromDate90 = dojo.date.add(fromDate,"day",90);
                            //Add min date fromDate.
                            dijit.byId("toDate").constraints.min = fromDate;
                            //add max date  fromDate + 90 days.
                            dijit.byId("toDate").constraints.max = fromDate90; 
                        } '/>

    <label for="toDate">To:</label> 
    <input id="toDate" data-dojo-type="dijit/form/DateTextBox"
                       data-dojo-props='type:"text", name:"toDate", required:true,
                        onChange:function(){
                            var toDate = this.get("value");
                            var toDate90 = dojo.date.add(toDate,"day",-90);
                            //Add max date toDate.
                            dijit.byId("fromDate").constraints.max = toDate;
                            //Add min date toDate - 90 days. 
                            dijit.byId("fromDate").constraints.min = toDate90;
                        } '/>