CODEWITHSUNDEEP
javascriptjqueryhtmldate
Sahil Kashyap
Sahil Kashyap

Reputation: 359

Autofill date in html using jquery

Table which has a "date-inputfield"(normal input type="date" ta) and "Add button"(which creates new date-field)

I'm using code from this website:

I've just added an datefield Link to the code

I found this solution but it lacks add button and how to increment the date over and over again.

js fiddle code

Problem I'm facing: user has to fill date everytime he clicks Add button

Where I need help: I want user to fill the first date-field and when he clicks Add the date gets incremented by one and again he clicks Add the previous date gets incremented

for eg:

as long as he clicks add button date keeps incrementing

I have tried on(),prev(),closest() jquery method to target the previous date but nothing seems to work I even tried stepUp() method of javascript but i get tangled on how to target the previous date. I also thought of using moment.js,date.js but i don't know how to increment the date in dynamically created date field

I've stuck in this problem for over a week. any suggestion on how I can improve my web development skill thanks: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 );
})

Upvotes: 0

Views: 2341

Answers (1)

Sukanya Purushothaman
Sukanya Purushothaman

Reputation: 951

You can use moment.js for incrementing date. Please see the Docs for moment().add(number, 'string').

In my example on button click an taking the value from the last input box, and converting it into date function. The clone method is used to create a copy of the input box to show the date.

$("#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>

Upvotes: 2

Related Questions