如何获取日期的年份和月份

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>

隐藏form2的css代码

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