2014-12-03 87 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

相關問題