How to get year and month of date

Question

i have 2 form, form1 contains an input date and a button validate, i want when i click on button validate the year of the date show in the cells year and month of the date show in the cells of months . NB:button validate display form2 and hide form1. button validate display form2 and hide form1

<div id="form1">
  <div class="form-group">    
     <label>Date:</label>
      <input type="date" id="datePicker" class="form-control">
    </div>
</div>
//form 2
<div id="form2">
    <h4>DATE : <span id="dateE"></span></h4>

  <table class="table table-bordered" id="mytable">
  <tr>
    <th><input type="checkbox" id="check_all"></th>
    <th>matricule</th>
    <th>Year</th>
    <th>month</th>
    <th>salary</th>
    <th>number day</th>
    <th>premium</th>
  </tr>
  <tr>
    <td><input type="checkbox" class="checkbox"></td>
    <td>1</td>
    <td><input type="hidden" class='year' class="form-control" ></td>
    <td><input type="hidden" class='month' class="form-control" ></td>
    <td>5000</td>
    <td>2</td>
    <td><input type="text" name="prime" class="form-control" value="0"></td>
  </tr>
  <tr>
    <td><input type="checkbox" class="checkbox"></td>
    <td>2</td>
    <td><input type="hidden" class='year' class="form-control" ></td>
    <td><input type="hidden" class='month' class="form-control" ></td>
    <td>6000</td>
    <td>2</td>
    <td><input type="text" name="prime" class="form-control" value="0"></td>
  </tr>
  <tr>
    <td><input type="checkbox" class="checkbox"></td>
    <td>2</td>
    <td><input type="hidden" class='year' class="form-control" ></td>
    <td><input type="hidden" class='month' class="form-control" ></td>
    <td>7000</td>
    <td>1</td>
    <td><input type="text" name="prime" class="form-control" value="0"></td>
  </tr>
  </table>
</div>

<div class="form-group col-md-offset-5 ">
  <button class="btn btn-success add-all" type="submit" id="hide">Pointage men</button>
</div>

css code to hide form2

    <style>
    #form2{
display:none;
}
</style>

code jquery

    $(document).ready(function() {
  $('#check_all').on('click', function(e) {
    if ($(this).is(':checked', true)) {
      $(".checkbox").prop('checked', true);
    } else {
      $(".checkbox").prop('checked', false);
    }
  });
  $('.checkbox').on('click', function() {
    if ($('.checkbox:checked').length == $('.checkbox').length) {
      $('#check_all').prop('checked', true);
    } else {
      $('#check_all').prop('checked', false);
    }
  });
    var now = new Date();
    var day = ("0" + now.getDate()).slice(-2);
    var month = ("0" + (now.getMonth() + 1)).slice(-2);
    var today = now.getFullYear()+"-"+(month)+"-"+(day) ;
    $('#datePicker').val(today);
});
     $(document).ready(function(){
         $("#hide").click(function(){
            let valu = $('#datePicker').val();
             $('#dateE').text(valu);
             $('.year').val(valu);
             $('.month').val(valu);

            $("#form1").hide();
            $("#form2").show();
          });
 });

Answer 1

There are two problems here. First is that you are setting the .val() of a hidden input field, not setting the contents of the <td> surrounding it. And secondly, you're setting the value of that field as the full date.

There are a couple ways you can do this. You could just split the date string on '-', and put the values in, or you can create a date object and get the year and month from it.

Then you can put the values into the <td> fields. If you still need the hidden inputs, you can still add the value to them the way that you are currently doing it.

I have included a working snippet that you can run below.

Explanation:

let valu = $('#datePicker').val();
let selectedDate = new Date(valu); // This makes a new Date object from the selected date
var selectedYear = selectedDate.getFullYear(); // This grabs the year from that date
var selectedMonth = selectedDate.getMonth() + 1; // This grabs the month from that date.  We add 1, because getMonth is zero based, so January is 0.

So now we have two new variables, selectedYear and selectedMonth with the appropriate values, and then:

$('.year').val(selectedYear).parent().prepend(selectedYear);
$('.month').val(selectedMonth).parent().prepend(selectedMonth);

This section first sets the year and month values in the hidden input fields, and then prepends the text into the .parent() element of the hidden input, which in this case is the <td>

So now you have the text in the table, and the proper values in the hidden input elements.

 $(document).ready(function() { $('#check_all').on('click', function(e) { if ($(this).is(':checked', true)) { $(".checkbox").prop('checked', true); } else { $(".checkbox").prop('checked', false); } }); $('.checkbox').on('click', function() { if ($('.checkbox:checked').length == $('.checkbox').length) { $('#check_all').prop('checked', true); } else { $('#check_all').prop('checked', false); } }); var now = new Date(); var day = ("0" + now.getDate()).slice(-2); var month = ("0" + (now.getMonth() + 1)).slice(-2); var today = now.getFullYear()+"-"+(month)+"-"+(day) ; $('#datePicker').val(today); }); $(document).ready(function(){ $("#hide").click(function(){ let valu = $('#datePicker').val(); let selectedDate = new Date(valu); var selectedYear = selectedDate.getFullYear(); var selectedMonth = selectedDate.getMonth() + 1; $('#dateE').text(valu); $('.year').val(selectedYear).parent().prepend(selectedYear); $('.month').val(selectedMonth).parent().prepend(selectedMonth); $("#form1").hide(); $("#form2").show(); }); });

 #form2{ display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <div id="form1"> <div class="form-group"> <label>Date:</label> <input type="date" id="datePicker" class="form-control"> </div> </div> //form 2 <div id="form2"> <h4>DATE : <span id="dateE"></span></h4> <table class="table table-bordered" id="mytable"> <tr> <th><input type="checkbox" id="check_all"></th> <th>matricule</th> <th>Year</th> <th>month</th> <th>salary</th> <th>number day</th> <th>premium</th> </tr> <tr> <td><input type="checkbox" class="checkbox"></td> <td>1</td> <td><input type="hidden" class='year' class="form-control" /></td> <td><input type="hidden" class='month' class="form-control" /></td> <td>5000</td> <td>2</td> <td><input type="text" name="prime" class="form-control" value="0"></td> </tr> <tr> <td><input type="checkbox" class="checkbox"></td> <td>2</td> <td><input type="hidden" class='year' class="form-control" ></td> <td><input type="hidden" class='month' class="form-control" ></td> <td>6000</td> <td>2</td> <td><input type="text" name="prime" class="form-control" value="0"></td> </tr> <tr> <td><input type="checkbox" class="checkbox"></td> <td>2</td> <td><input type="hidden" class='year' class="form-control" ></td> <td><input type="hidden" class='month' class="form-control" ></td> <td>7000</td> <td>1</td> <td><input type="text" name="prime" class="form-control" value="0"></td> </tr> </table> </div> <div class="form-group col-md-offset-5 "> <button class="btn btn-success add-all" type="submit" id="hide">Pointage men</button> </div>