CODEWITHSUNDEEP
javascriptjqueryhtml
Zhubei Federer
Zhubei Federer

Reputation: 1268

How to get all of input date format in table by javascript?

I create a html table with date input:

<table id="myTable">
    <tr>
        <td><input name="start" type="date" value= ""/> ~ <input name="end" type="date" value=""/></td>
    </tr>
    <tr>
        <td><input name="start" type="date" value= ""/> ~ <input name="end" type="date" value=""/></td>
    </tr>
</table>

now I want to get all of input value to string by javascript like this:

2019-06-01~2019-06-02,2019-06-03~2019-06-04

I am just begin with javascript,can someone helps me? very thanks!

Upvotes: 0

Views: 1644

Answers (2)

dganenco
dganenco

Reputation: 1616

You can get the inputs as strings like this:

function getDates() {
  var res = '';
  var rows = $('#myTable').find('tr');
  rows.each(function(index, el) {
    res += $(el).find('input[name=start]').val();
    res += '~';
    res += $(el).find('input[name=end]').val();
    if (index < rows.length - 1) {
      res += ', ';
    }
  });

  return res;
}

console.log(getDates());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable">
  <tr>
    <td><input name="start" type="date" value="2018-01-23" /> ~ <input name="end" type="date" value="2019-01-22" /></td>
  </tr>
  <tr>
    <td><input name="start" type="date" value="2018-01-23" /> ~ <input name="end" type="date" value="2019-01-28" /></td>
  </tr>
</table>

Upvotes: 3

axel axel
axel axel

Reputation: 253

You can use this and dates array will contain all dates input of your page

$('input[type="date"]').on('input',function(){
    let dates = [];
    $.each($('input[type="date"]'),function(){
        dates.push($this.val());
    }
}

and because thats an event you should put this in a 

$(document).ready(function () {}

Upvotes: 1

Related Questions