2014-12-03 84 views
0

可以说我有两个领域:如何在第二个字段中插入日期到第一个字段后插入日期?

Start Date: <input type="date" name=""/> 
End Date: <input type="date" name=""/> 

我希望当我在第一个字段中添加例如2014年3月12日添加日期到第二场后7天autoinsert(在这种情况下,它会10/12/2014)。

我会让我的问题更清楚。

<title>Ha</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <link rel="stylesheet" href="jquery-ui.css"> 
    <script src="jquery.min.js" type="text/javascript" ></script> 
    <script src="jquery-ui.js"></script> 
<script> 
$(function() { 
$("#datepicker").datepicker(); 
}); 
$(function() { 
$("#datepicker1").datepicker(); 
}); 
</script> 

我使用jquery datepicker日历。 这里是我的领域:

<div class='ddate'><p>Start date:<input type="date" id="datepicker" name="d1" required="required"></p></div> 
         <div class='ddate'><p>End date:<input type="date" id="datepicker1" name="d2" ></p></div> 

所以我应该使用一些JS函数或?

+0

你有机会获得如jQuery或任何角度图书馆?你试过什么了?标签绝对不应该具有'name'属性的相同值,理想情况下应该具有'id'属性。 – 2014-12-03 13:32:32

+0

您尝试使用哪些JavaScript代码。 只需将转换为微秒的天数加上,就可以使用Date将日期添加到'StartDate'。即current_date + 7天* 24 * 60 * 60 * 1000。然后将其转换为新的Date对象。 – 2014-12-03 13:42:08

+0

我编辑我的问题:) – lfc123 2014-12-03 13:47:35

回答

0

如果您正在使用jQuery,你可以简单地对事件重视的时候开始日期的变化......

Start Date: <input type="date" name="date" id="start_date" /> 
End Date: <input type="date" name="date" id="end_date" /> 

...然后...

$("#start_date").on('blur', function() { 
    var self = this; 

    var new_date = new Date($(self).val()); 
    new_date.setDate(new_date.getDate() + 8); 
    $("#end_date").val(new_date.yyyymmdd()); 
}); 

Date.prototype.yyyymmdd = function() {          
    var yyyy = this.getFullYear().toString();          
    var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based   
    var dd = this.getDate().toString();    

    return yyyy + '-' + (mm[1]?mm:"0"+mm[0]) + '-' + (dd[1]?dd:"0"+dd[0]); 
}; 

jsFiddle

0

在Javascript中做日期数学是很困难的,因为Javascript中的本地Date对象是lan中实现较差的对象之一瓜哥。我的转到日期库是moment.js

下面的代码应该让你非常接近,并告诉你如何验证无效日期字符串的字段。

var $startDate = $('#startDate'), 
    $endDate = $('#endDate'); 


$startDate.on('change', function(e) { 
    var currentDate = moment($(this).val(), "YYYY-MM-DD"); 
    $startDate.css('background', 'none'); 

    if (currentDate.isValid()) { 
    var weekLater = currentDate.add(7, 'days'); 
    $endDate.val(weekLater.format('YYYY-MM-DD')); 
    } else { 
    $startDate.css('background', 'red'); 
    } 
}); 

编辑: 工作实例http://jsbin.com/puwaco/1/edit?html,js,output

+0

像使用moment.js! – rfornal 2014-12-03 13:58:01

相关问题