如何获得日期的年月

Question

我有2个表单，form1包含一个输入日期和一个按钮验证，我想当我单击按钮时验证单元格中显示日期的年份和单元格中日期显示的月份个月。 注意：按钮验证显示form2并隐藏form1。 按钮验证显示form2并隐藏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代码隐藏form2

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

代码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

这里有两个问题。首先是您要设置隐藏输入字段的.val()，而不是设置其周围的<td>的内容。其次，您要将该字段的值设置为完整日期。

有两种方法可以执行此操作。您可以仅将日期字符串拆分为'-'，然后将值放入其中，也可以创建日期对象并从中获取年份和月份。

然后，您可以将值放入<td>字段中。如果仍然需要隐藏的输入，则仍可以按照当前操作的方式向其添加值。

我提供了一个可以在下面运行的片段。

说明：

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.

因此，现在我们有了两个新变量，即带有适当值的selectedYear和selectedMonth，然后：

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

本节首先在隐藏的输入字段中设置年和月的值，然后将文本添加到隐藏的输入的.parent()元素中，本例中为<td>

因此，您现在在表中有文本，在隐藏的输入元素中有适当的值。

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