从抵达日历添加2天到离开日历

时间:2015-04-06 16:04:22

标签: javascript jquery html5 datepicker

我目前正在使用HTML 5日期类型,该日期类型为用户选择和到达日期提取日历。我希望能够在离开日历中添加两天,这是我表单中的下一个字段。日期格式为mm / dd / yyyy。

如果有人选择让我们从到达日历表单字段中选择07/03/2015,那么我希望下一个出发字段已经存在于07/05/2015。希望有意义和

感谢您对此提供任何帮助。

这是代码:<div class="col-md-4"> <label>Arrival Date *</label> <input type="date" value="" maxlength="10" class="form-control" name="arrival" id="arrival" required> </div> <div class="col-md-4"> <label>Departure Date *</label> <input type="date" value="" maxlength="10" class="form-control" name="depart" id="depart" required> </div>

3 个答案:

答案 0 :(得分:0)

您需要将日期输入字段的值解析为日期对象,然后将该日期对象添加两天。

var departure = document.getElementById('departure').value;
var arrivalTime = Date.parse(departure) + (1000 * 60 * 60 * 24 * 2);
var arrivalDate = new Date(arrivalTime);
// set the value on the input
document.getElementById('arrival').value = arrivalDate.toString('yyyy-MM-dd');

您需要将日期转换为该格式,否则HTML5将无效。该主题将指导您正确的方向(例如有用的库)

How to format a JavaScript date

答案 1 :(得分:0)

您可以获取当前日期,只需添加两天的毫秒数。您必须处理从所需格式转换为RFC 3339日期格式( YYYY-MM-DD )。

  

input type=date – date input control

     

[RFC 3339]中定义的有效完整日期,其附加条件是年份组件为四位或更多位数,表示大于0的数字。”

日期输入值的语法

您可以查看here (RFC3339 5.6)

date-fullyear   = 4DIGIT
date-month      = 2DIGIT  ; 01-12
date-mday       = 2DIGIT  ; 01-28, 01-29, 01-30, 01-31 based on
                         ; month/year

full-date       = date-fullyear "-" date-month "-" date-mday

代码

$(function() {
  function parseDate(dateString) {
    var parts = dateString.split('/');
    return new Date(parts[2], parts[0] - 1, parts[1]);
  }
  
  function getFormattedDate(date) {
    return date.toISOString().substring(0, 10);
  }
  
  function addTime(date, ms) {
    return new Date(date.getTime() + ms);
  }

  var MS_SEC = 1000;
  var MS_MIN = MS_SEC * 60;
  var MS_HOUR = MS_MIN * 60;
  var MS_DAY = MS_HOUR * 24;
  
  var date = parseDate('07/03/2015');

  $('#arrival').val(getFormattedDate(date));
  $('#departure').val(getFormattedDate(addTime(date, MS_DAY * 2)));
});
label {
  display: inline-block;
  width: 80px;
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for="arrival">Arrival: </label>
<input type=date id="arrival" />
<br />
<label for="departure">Departure: </label>
<input type=date id="departure" />

答案 2 :(得分:0)

var date1 = Date.parse('07/05/2015');
date1.setDate(date1.getDate()+2);

现在date1将于2015年5月5日发布