Add next date whenever I create a new line

Asked

Viewed 73 times

2

I created a table to do insert, update and delete with datatables. I want to add a new row, in the date column, which automatically fills in with the date next to the previous row. Example. On the last line I have the date 05-07-2019, when adding a line, the date field is soon filled with 06-07-2019. And also when it comes to the end of the month begin with the date of the following month.

Code:

class CellDate{
constructor( start_date ){
    this.date = start_date;
}
getNextDate(){
    this.date.setDate(this.date.getDate() + 1);
    return this.date;
}
}

var DateIndexer = new CellDate(new Date());

$('#add').click(function(){

var html = '<tr>';
html += '<td contenteditable id="data1">'+DateIndexer.getNextDate()+'</td>';
html += '<td contenteditable id="data2"></td>';
html += '<td contenteditable id="data3"></td>';
html += '<td contenteditable id="data4"></td>';
html += '<td contenteditable id="data5"></td>';
html += '<td><button type="button" name="insert" id="insert" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-send"></span></button></td>';
html += '</tr>';
$('#user_data tbody').prepend(html);
});

$(document).on('click', '#insert', function(){
var data = $('#data1').text();
var responsavel = $('#data2').text();
var apoio = $('#data3').text();
var elementos = $('#data4').text();
var elementos1 = $('#data5').text();
if(data != '' && responsavel != '' && apoio != '' && elementos != '' && elementos1 != '')
{
 $.ajax({
 url:"./insert",
 method:"POST",
 data:{data:data, responsavel:responsavel, apoio:apoio, elementos:elementos, elementos1:elementos1},
 success:function(data)
 {
  $('#alert_message').html('<div class="alert alert-success">'+data+'</div>');
  $('#user_data').DataTable().destroy();
  fetch_data();
 }
 });
 setInterval(function(){
 $('#alert_message').html('');
 }, 5000);
 }
 else
{
 alert("Os campos são de preencimento obrigatório!");
}
});

But I have two problems:

1º the date format, returns like this:

Wed Jul 03 2019 14:56:57 GMT+0100 (Hora de verão da Europa Ocidental) e pretendia que fosse por exemplo: 03-07-2019

second problem:

It does not start at the date that exists in the previous line, it starts at the date of the current day

javascript

  • The table will always start with a row?

  • @Sam The first time to be filled starts without lines, after that always has filled lines

  • And when there are no lines, what date will it be? Why won’t there be an earlier date to compare.

  • @Sam when there are no lines, will pick up the first day of the next month

1 answer

2


Create a function that will return the date in the format dd-mm-aaaa:

function novaData(d){
   var dia = d.getDate().toString();
   dia = (dia.length == 1) ? '0'+dia : dia;
   var mes = (d.getMonth()+1).toString();
   mes = (mes.length == 1) ? '0'+mes : mes;
   var ano = d.getFullYear();
   return dia+"-"+mes+"-"+ano;
}

In function getNextDate() put a if for two conditions:

if(){
  // caso já exista uma linha com uma data
}else{
  // caso NÃO exista uma linha com uma data
}

The function will look like this:

getNextDate(){
   if($('#user_data tbody tr').length){
      var ultima_data = $("#user_data tbody tr:first td:first").text().trim().split("-");
      var ultimo_dia = +ultima_data[0];
      var ultimo_mes = +ultima_data[1];
      var ultimo_ano = +ultima_data[2];
      this.date.setDate(ultimo_dia);
      this.date.setMonth(ultimo_mes-1);
      this.date.setYear(ultimo_ano);
      this.date.setDate( this.date.getDate()+1);
   }else{
      this.date.setMonth(this.date.getMonth() + 1);
      this.date.setDate(1);
   }
   return  novaData(this.date);
}

Test when there is no line:

$(document).on('click', '#insert', function(){
   var data = $('#data1').text();
   var responsavel = $('#data2').text();
   var apoio = $('#data3').text();
   var elementos = $('#data4').text();
   var elementos1 = $('#data5').text();
   if(data != '' && responsavel != '' && apoio != '' && elementos != '' && elementos1 != '')
   {
    $.ajax({
     url:"./insert",
     method:"POST",
     data:{data:data, responsavel:responsavel, apoio:apoio, elementos:elementos, elementos1:elementos1},
     success:function(data)
     {
      $('#alert_message').html('<div class="alert alert-success">'+data+'</div>');
      $('#user_data').DataTable().destroy();
      fetch_data();
     }
    });
    setInterval(function(){
     $('#alert_message').html('');
    }, 5000);
   }
   else
   {
    alert("Os campos são de preencimento obrigatório!");
   }
  });
  
function novaData(d){
   var dia  = d.getDate().toString();
   dia = (dia.length == 1) ? '0'+dia : dia;
   var mes  = (d.getMonth()+1).toString();
   mes = (mes.length == 1) ? '0'+mes : mes;
   var ano = d.getFullYear();
   return dia+"-"+mes+"-"+ano;
}
  
  class CellDate{
    constructor( start_date ){
        this.date = start_date;
    }
getNextDate(){
   if($('#user_data tbody tr').length){
      var ultima_data = $("#user_data tbody tr:first td:first").text().trim().split("-");
      var ultimo_dia = +ultima_data[0];
      var ultimo_mes = +ultima_data[1];
      var ultimo_ano = +ultima_data[2];
      this.date.setDate(ultimo_dia);
      this.date.setMonth(ultimo_mes-1);
      this.date.setYear(ultimo_ano);
      this.date.setDate( this.date.getDate()+1);
   }else{
      this.date.setMonth(this.date.getMonth() + 1);
      this.date.setDate(1);
   }
   return  novaData(this.date);
}
}

  var DateIndexer = new CellDate(new Date(Date.now()));
  
  
$('#add').click(function(){
    var html = '<tr>';
   html += '<td contenteditable id="data1">'+DateIndexer.getNextDate()+'</td>';
   html += '<td contenteditable id="data2"></td>';
   html += '<td contenteditable id="data3"></td>';
   html += '<td contenteditable id="data4"></td>';
   html += '<td contenteditable id="data5"></td>';
   html += '<td><button type="button" name="insert" id="insert" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-send"></span></button></td>';
   html += '</tr>';
   $('#user_data tbody').prepend(html);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="user_data">
   <tbody>
   </tbody>
</table>
<button id="add">Add</button>

Test when a line already exists:

$(document).on('click', '#insert', function(){
   var data = $('#data1').text();
   var responsavel = $('#data2').text();
   var apoio = $('#data3').text();
   var elementos = $('#data4').text();
   var elementos1 = $('#data5').text();
   if(data != '' && responsavel != '' && apoio != '' && elementos != '' && elementos1 != '')
   {
    $.ajax({
     url:"./insert",
     method:"POST",
     data:{data:data, responsavel:responsavel, apoio:apoio, elementos:elementos, elementos1:elementos1},
     success:function(data)
     {
      $('#alert_message').html('<div class="alert alert-success">'+data+'</div>');
      $('#user_data').DataTable().destroy();
      fetch_data();
     }
    });
    setInterval(function(){
     $('#alert_message').html('');
    }, 5000);
   }
   else
   {
    alert("Os campos são de preencimento obrigatório!");
   }
  });
  
function novaData(d){
   var dia  = d.getDate().toString();
   dia = (dia.length == 1) ? '0'+dia : dia;
   var mes  = (d.getMonth()+1).toString();
   mes = (mes.length == 1) ? '0'+mes : mes;
   var ano = d.getFullYear();
   return dia+"-"+mes+"-"+ano;
}
  
  class CellDate{
    constructor( start_date ){
        this.date = start_date;
    }
getNextDate(){
   if($('#user_data tbody tr').length){
      var ultima_data = $("#user_data tbody tr:first td:first").text().trim().split("-");
      var ultimo_dia = +ultima_data[0];
      var ultimo_mes = +ultima_data[1];
      var ultimo_ano = +ultima_data[2];
      this.date.setDate(ultimo_dia);
      this.date.setMonth(ultimo_mes-1);
      this.date.setYear(ultimo_ano);
      this.date.setDate( this.date.getDate()+1);
   }else{
      this.date.setMonth(this.date.getMonth() + 1);
      this.date.setDate(1);
   }
   return  novaData(this.date);
}
}

  var DateIndexer = new CellDate(new Date(Date.now()));
  
  
$('#add').click(function(){
    var html = '<tr>';
   html += '<td contenteditable id="data1">'+DateIndexer.getNextDate()+'</td>';
   html += '<td contenteditable id="data2"></td>';
   html += '<td contenteditable id="data3"></td>';
   html += '<td contenteditable id="data4"></td>';
   html += '<td contenteditable id="data5"></td>';
   html += '<td><button type="button" name="insert" id="insert" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-send"></span></button></td>';
   html += '</tr>';
   $('#user_data tbody').prepend(html);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="user_data">
   <tbody>
      <tr>
         <td>06-08-2019</td>
      </tr>
      <tr>
         <td>05-08-2019</td>
      </tr>
   </tbody>
</table>
<button id="add">Add</button>

  • the two options work, but only if there is already a row created in the table

  • If there is no line take the first day of the following month, as you said.

  • but I tried without a line and Nan-Nan-Nan appears

  • Take a look at the two examples I posted. One has no line and works.

  • So I really don’t know what to do. If one place works and another doesn’t, then it’s complicated.

  • Oops! Managed to solve?

  • not yet and the problem is to return the data that exist in the database. Here I show my code link and the problem is in fetch_data(); which exists at the very beginning of javascript, because it is what makes the data return from the database. If the fetch_data(); works, but does not return the data that already exist in the database

Show 2 more comments

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.