input date设置时间

﹏ヽ暗。殇╰゛Y 2022-05-28 00:53 249阅读 0赞

ATM\_之交易记录查询过程中遇到一问题。如下图，通常在页面初始化的时候我们都希望**时间选中框**，和下拉选择框有**初始值**（重点是时间初始化）；  
![这里写图片描述][70]

这里我遇到问题是：不管我使用原始js还是jQ都不能给默认值。代码如下

**简单html部分**，可以自行设计css（这都不是重点）

<div id="query">
            <form action="">
                <div class="title">交易记录查询</div>
                <span class="f_sp">选择查询时间</span>
                    <input type="date" id="datetime" class="f_ip" required="required" >
                <span class="f_sp">选择交易类型 </span>
                <select class="f_ip" id="type">
                    <option>请选择</option>
                    <option>取款</option>
                    <option>存款</option>
                    <option>转账</option>
                </select>
                <input type="button" id="btn_submit" class="f_sbm f_ip" value="查询"> 
            </form>
        </div>

**js部分（重点部分）**

//这里是通过后台传递的初始时间参数，你测试可以不需要
    //var time = $("#htime").html();
    //console.log(time);
    //有问题部分
        $("#datetime").val("2015/02/09");
        $('#datetime').attr('value','2015/12/09');
        document.getElementById("datetime").value = "2015/02/09";
    
        //document.getElementById('htime').valueAsDate=new Date();
    //正确部分
        $("#datetime").val("2015-02-09");
        $('#datetime').attr('value','2015-12-09');
        document.getElementById("datetime").value = "2015-02-09";

值得注意的是：input type 时间类型可以有一下几种方式  
**“date”、“week”、“month”、“time”、“datetime”和“datetime-local”。**

本次**设置date初始化时间**问题比较简单，但是容易出现初始化不了的情况，这里时间最好不使用2018/03/16的格式，而**采用2018-03-16的格式**.

[70]: /images/20220528/e5424068a0ee4bdbb8f0689b4dd4cc78.png