Question

在我的页面上，我有一个以模态打开的表单。它有几个字段，日期就是其中之一。我想将其设置为今天的默认日期。我的模态可以在下面看到

    <!--main modal-->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header" style ="background-color: #38BFEF;">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title"><center><font color="white">New Food Delivery</font></center></h4>
        </div>
        <div class="modal-body">

 <!---inside pop up content start-->
  <form>
  <center>
    <p>
        <label for="Delivery Number">Delivery Number:</label>
        <input type="text" name="delivery_number" id="delNumber" style="width:150px;" autofocus="autofocus">
    </p>
    <p>
        <label for="Delivery Date">Delivery Date:</label>
        <input type="date" name="datepicker" style="margin-left:4%;width:150px;" id="datepicker">
    </p>
    <p>
        <label for="Supplier">Supplier:</label>
        <input type="text" name="supplier" style="margin-left:10%;width:150px;" id="supplier">
    </p>
     <p>
        <label for="Supplier">Cost of Delivery:</label>
        <input type="text" name="cost" style="margin-left:1%;width:150px;" id="cost">
    </p>
    </center>
    <center><input type="button"  id="submit" class="btn btn-info btn-lg vbtn" value="Submit" onclick="submitDelivery()" data-toggle="modal" data-target="#confirmModal"></center>
</form>


 <!---inside pop up content end-->
       </div>
        <div class="modal-footer" style ="background-color: #38BFEF;">
          <input type="button" id="close" class="btn btn-default" data-dismiss="modal" value="Cancel">
        </div>
      </div>

    </div>
    </div>

然后我有几个javascript函数用于不同的事情，例如通过输入按下输入，在按下输入时提交表单等。

其中一个功能是设置#datepicker的日期，它看起来像这样

$('#myModal').on('shown.bs.modal', function (e) {
     $('#delNumber').focus();

    var now = new Date();
    var day = ("0" + now.getDate()).slice(-2);
    var month = ("0" + (now.getMonth() + 1)).slice(-2);

    var today = (day)+"/"+(month)+"/"+ now.getFullYear();
    //alert(today);
    $('#datePicker').val(today);
})

然而，当我在Chrome中打开模态时，框仍然显示dd / mm / yyyy，看起来功能不能正常工作？

另一个问题是，当我在Firefox中打开上述代码时，它似乎无法将日期框识别为日期输入类型。

Answer 1

在表单中，您的ID为 datepicker ，并且您尝试使用jquery访问 date P icker （注意大写P）。< / p>

Answer 2

您需要使用格式DD/MM/YYYY

，而不是使用YYYY-MM-DD

结果字符串将是：

 var today = (now.getFullYear() + '-' + month + '-' + day);
 $('#datepicker').val(today);

以下是工作示例：https://jsfiddle.net/panamaprophet/2Lt2q3ga/

在模态中设置日期输入类型框的当前日期

2 个答案: