Autofill date in html using jquery

Question

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.

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:

user enters 01/01/2018
clicks add (new date-field generates)
the date field is set to 02/01/2018
clicks add again (new date-field generates)
the date field is set to 03/01/2018

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 );
})

Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the **shortest code necessary** to reproduce it in the question itself. — Asons, Jun 20 '18 at 09:00
https://stackoverflow.com/questions/9989382/how-can-i-add-1-day-to-current-date — Chidambaram, Jun 20 '18 at 10:19

Sukanya Purushothaman · Answer 1 · 2018-06-25T05:23:07.600

2

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>

edited Jun 25 '18 at 05:23

answered Jun 20 '18 at 10:36

Sukanya Purushothaman

941
10
25

You are a legend dude. Thank you so much :D. This works like charm. I've been stuck in this problem for over a week. Thanks again. Have a very good day sir – Sahil Kashyap Jun 21 '18 at 05:20
@SahilKashyap I checked your jsfiddle. Sorry, I didn't get what you mean. – Sukanya Purushothaman Jun 22 '18 at 13:28
your answer saved my life thank you but I'm having problems add your code in this code https://www.webslesson.info/2017/03/multiple-inline-insert-data-using-ajax-jquery-php.html – Sahil Kashyap Jun 23 '18 at 10:34
I have multiple input fields with type text . to target the date textbox I did this – Sahil Kashyap Jun 23 '18 at 10:39
`` – Sahil Kashyap Jun 23 '18 at 11:10
i pasted this code inside add button selector. the date is working fine but when I click remove button it is not removing one line at a time it removes all the dates `var date = moment($(".sahil input[type='text']:last").val(), 'YYYY-MM-DD'); $(".sahil input[type='text']:last").clone().val(moment(date) .add(1, 'days').format('YYYY-MM-DD')).appendTo('.sahil'); ` – Sahil Kashyap Jun 23 '18 at 11:13
when ever I click add button it doesn't show in a new row – Sahil Kashyap Jun 23 '18 at 11:14
and If I change the appendTo('#crud_table') all the new dates show below. I want the date side by side along with every new row but it's not working that way – Sahil Kashyap Jun 23 '18 at 11:51
I've changed the fiddle with your requirement. Added a table and put the input field in a column. Please check the code and let me know if anything else is needed. Please check this Fiddle. http://jsfiddle.net/3p1szhnv/49/ – Sukanya Purushothaman Jun 25 '18 at 05:16
I changed my answer according to your requirements. – Sukanya Purushothaman Jun 25 '18 at 05:23
i just want to thank you from the bottom of heart. thanks a lot – Sahil Kashyap Jun 25 '18 at 05:36
kindly have look at this question please https://stackoverflow.com/questions/51076295/using-jquery-clone-a-new-class-of-bootstarp-tokenfield-generates-within-the-in – Sahil Kashyap Jun 29 '18 at 05:40
I saw your question. To get only one input field pass true as an argument of clone method. In your example, it is like var $row=$("#crud_table tbody tr.tableinputs:last").clone(true); – Sukanya Purushothaman Jun 29 '18 at 12:19
Thanks...I tried it but it loses it's tag ability(I used bootstrap tokenfield). Should I look for some other library to make tags – Sahil Kashyap Jun 30 '18 at 06:21

Autofill date in html using jquery

1 Answers1