Question

具有“日期输入字段” （普通输入类型=“ date” ta）和“添加按钮” （创建新的日期字段）的表< / p>

我正在使用此网站上的代码：

我刚刚添加了一个日期字段 Link to the code

我找到了这个解决方案，但是它缺少添加按钮以及如何一遍又一遍地增加日期的方法。

js fiddle code

我面临的问题：用户必须每次点击<添加> 来填写日期

需要帮助的地方：我希望用户填写第一个日期字段当他点击添加时，日期将增加一然后他再次点击添加，上一个日期会增加

例如：

用户输入2018年1月1日
点击添加（生成新的日期字段）
日期字段设置为2018年2月1日
再次单击添加（生成新的日期字段）
日期字段设置为2018年3月1日

只要他点击添加按钮，日期就会不断增加

我已经尝试过on（），prev（），closest（）jQuery方法来定位先前的日期，但是似乎没有任何作用，我什至尝试了javascript的stepUp（）方法，但是我却纠结于如何定位先前的日期。我还考虑过使用moment.js，date.js，但我不知道如何在动态创建的日期字段中增加日期

我已经在这个问题上坚持了一个多星期。关于如何提高我的Web开发技能的任何建议谢谢：D

<div id='holder'> </div>


$("#holder").append('<input id="date1" />');
$("#holder").append('<input id="date2" />');


$('#date1').datepicker();
$('#date2').datepicker();

$('#date1').change(function(){
    var date1 = $('#date1').datepicker('getDate');
    var date = new Date( Date.parse( date1 ) ); 
    date.setDate( date.getDate() + 1 );

    var newDate = date.toDateString(); 
    newDate = new Date( Date.parse( newDate ) );

    $('#date2').datepicker('setDate', newDate );
})

Answer 1

您可以使用moment.js来增加日期。请参见reentrancy了解一下moment（）。add（number，'string'）。

在我的示例中，单击按钮，从最后一个输入框中获取一个值，并将其转换为日期函数。 clone方法用于创建输入框的副本以显示日期。

$("#add-bttn").on("click", function() {

// First find the date on the last input input box.
var date = moment($(".date_entry:last").val(), 'YYYY-MM-DD');
var slno = parseInt($(".date_container tbody tr:last td:first").text()) + 1;

//In order to add a new row with the newly added date you should append the row to the last tbody of the table tag. Also you must clone the entire row containing the input field.

$(".date_container tbody tr:last").clone().appendTo(".date_container tbody");
//Setting date on input field
$(".date_entry:last").val(moment(date) .add(1, 'days').format('YYYY-MM-DD'));
//Changing new sl no
$(".date_container tbody tr:last td:first").html(slno);
});

/* Removing last row from table */
$("#remove-bttn").on("click", function() {

//If this there is only one row left clear that row instead of removing it
if ($(".date_container tbody tr").length === 1)
$(".date_container tbody tr:last").find("input").val('');
else
  $(".date_container tbody tr:last").remove();
});

table {
  margin: 10px;
}

table td, table th {
  padding: 5px;
  text-align: center;
}

.date_entry {
  text-indent: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>
<body>
<table border="1" class="date_container">
<thead>
<tr>
<th>SL NO</th>
<th>DATE</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><input type="text" class="date_entry" placeholder="YYYY-MM-DD"></td>
</tr>
</tbody>
</table>
<button type="button" id="add-bttn">Add</button>
<button type="button" id="remove-bttn">Remove</button>
</body>

使用jquery

1 个答案: