想要根据持续时间选择和日期显示日期

时间:2014-12-21 17:10:09

标签: javascript html5 jquery-ui

我的html表单是这样的。

 <tr>        <td>Duration</td>
     <td>
     <select name="duration"> 
       <option value="1">1month duration</option>
       <option value="2">2month duration</option>
   <option value="3">3month duration</option>
</select>
</td>
<td>from date</td>
<td><input type="text" name="fromdate"/>(i used date picker here)</td>

<td>To date</td>
<td><input type="text" name="todate"/>(i used date picker here)</td>
 </tr>

现在我想要的是当我选择持续时间为1个月并且从日期开始到日期它应该显示30天后的日期,当我选择持续时间2个月和从日期到日期时它应该显示日期后60天

2 个答案:

答案 0 :(得分:0)

您可以使用setUTCMonth

setUTCDateDate(分别与getUTCMonthgetUTCDate合并)方法
var d = new Date(), // your starting Date object
    d1m,
    d30d;

// setting d1m = d + 1 month
d1m = new Date(d); // start the same as d
d1m.setUTCMonth(d1m.getUTCMonth() + 1); // add 1 month
console.log(d1m); // ready to use, so e.g. see what we've got

// setting d30d = d + 30 days
d30d = new Date(d); // start the same as d
d30d.setUTCDate(d30d.getUTCDate() + 30); // add 30 days
console.log(d30d); // ready to use, so e.g. see what we've got

答案 1 :(得分:0)

我写了一个示例脚本来解决您的问题。按照这种方法。

示例逻辑

$(document).ready(function(){    
    $("#fromDate").datepicker({
        onSelect: function(){     
               var fromDate = $("#fromDate").datepicker('getDate');
               var days = parseInt($("#duration").val()*30);
               var toDate = new Date(fromDate.getTime()+(days*24*60*60*1000));
               $("#toDate").datepicker('setDate', toDate);                              
            }
      });

    $("#fromDate").datepicker('setDate', new Date());
    $("#toDate").datepicker();
    var days = parseInt($(this).val()*30);
    toDate = new Date(new Date().getTime()+(days*24*60*60*1000));
            $("#toDate").datepicker('setDate', toDate);        
});

$("#duration").change(function(){
     var fromDate = $("#fromDate").datepicker('getDate');
     var days = parseInt($(this).val()*30);
     var toDate = new Date(fromDate.getTime()+(days*24*60*60*1000));
     $("#toDate").datepicker('setDate', toDate);                              
});

工作代码:http://jsfiddle.net/mjobvuwp/1/