时间戳

首页 > 解决方案 > 如何在 HTML 中自动选择当前日期？

javascript - 如何在 HTML 中自动选择当前日期？

问题描述

我想知道如何进行自动日期选择。这是代码。在日期范围选择器中，我希望第二行是当前日期，这意味着每次加载页面时它都应该反映最新日期。

<!DOCTYPE html>
<html>
<head>


<script>
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
 if(dd<10){
        dd='0'+dd
    } 
    if(mm<10){
        mm='0'+mm
    } 
today = yyyy+'-'+mm+'-'+dd;
document.getElementById("datefield").setAttribute("max", today);
function getdate() {
var date1=new Date();
document.getElementById("start2").value = new Date()
document.getElementById("start1").value=date1;
}
function onLoad() {
 var y = document.getElementById("myDIV");
 y.style.display = "none";
}
function myFunction() {
  var x = document.getElementById("mySelect").value;
   var y = document.getElementById("myDIV");
 
  if (x === "Momentum") {
     y.style.display = "block";
    
  } 
else {
     y.style.display = "none";
    
  }
}
 
</script>
      

<script>

var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
var optComponent = {
  format: 'mm-dd-yyyy',
  container: '#datePicker',
  orientation: 'auto top',
  todayHighlight: true,
  autoclose: true
};
// COMPONENT
$('#datePicker').datepicker(optComponent);
$('#datePicker').datepicker('setDate', today);


</script>
<style>
body  {
  background-image: url("/static/images/photo2.jpg");
    
    
  
height: 100%; 
  /* Center and scale the image nicely */
  background-position: full;
  background-repeat: no-repeat;
  background-size: cover;
}
         label {
    width:180px;
    clear:left;
    text-align:right;
    padding-right:10px;
}
input, label {
    float:left;
}
.custom1{
width:14%;
display:inline-block;
float: left;
clear:None;
}
.custom2{
width:17%;
display:inline-block;
float: left;
clear:None;
margin-top:1.5%;
}
.custom3{
position:absolute;
left: 0%; 
margin-top:40%;
}
</style>




   </head>
   
    
   <body onload="onLoad()">


      <form method="post" action="/BacktestAnalysis">
         
    


        



    
        <div class="custom1"> 


        <p>Strategy list </p> 

<select id="mySelect" onchange="myFunction()">

<option enabled selected value> -- select an option -- </option>
<option value="Momentum">Momentum</option>

  
</select>


<div id="myDIV">
<br> </br>
         <label for="number">Moving average window</label> <br> </br>
         <input type="number" name="ma" value=13>  <br> </br>
         

</div>









         
         








         
</div>
        







<div class="custom1">

  <p>Rebalance period</p> 

<select name="myDropDown2">
  
  
  <option value='BM'> Monthly</option>
  
  
</select>

</div>





        
         







<div class="custom2"> 

        
<label for="start">Date Range:</label>

<input type="date" id="start" name="start"
       min="1940/02/27" value="2005-01-01"> 




<input type="date" id="start" name="datePicker"
       min="2005-01-01" value=""> 


    


</div>


  

         
        
        
       
        
         

 <div class="custom3">       


 <input type="submit" value="Submit" name="ok"/>  


</div>

         
      </form>


 
   </body>


    
</html>

标签： javascripthtmldate-range

解决方案

据我了解，您希望将第二个日期输入的值更改为当前日期。

这是您的元素（我为它添加了一个类，以便稍后使用它）

        <input type="date" id="start" name="datePicker" min="2005-01-01" value="" class="secondDate">

*我为它添加了一个类。

要更改显示日期，我们需要更改该输入的值。之后，我们将从 Date 类中获取当前日期并将新日期分配给我们的元素。像这样 ：

let ele = document.querySelector(".secondDate");
var today = new Date();
var d = String(today.getDate() - 1).padStart(2, '0');
var m = String(today.getMonth() + 1).padStart(2, '0');
var y = today.getFullYear();
ele.value = y + "-" + m + "-" + d;

^ 此代码应在您的脚本标签内。但是要始终记住您的脚本代码的一件事应该始终位于正文标记之后。因为你不能改变还不存在的元素！

推荐阅读