76.WEB模板HTML5新对象datetime-local的使用

在编写web界面的时候，常会用到时期时间控件的使用需求。比如，我们需要写一个时间范围的搜索条件。
在HTML5中有一个新的对象datetime-local。
html代码

        <label style="color: #8aa4be;padding-left: 2px;margin-left: 15px">时间范围</label>
        <input id="btnSearch" type="datetime-local" value="{{.keyDateBegin.Format "2006-01-02T15:04"}}" style="color: #8aa4be;padding-left: 2px;padding-right: 2px;margin-left: 1px">
        <label style="color: #8aa4be;padding-left: 2px;margin-left: 1px">-</label>
        <input id="btnSearch" type="datetime-local" value="{{.keyDateEnd.Format "2006-01-02T15:04"}}" style="color: #8aa4be;padding-left: 2px;padding-right: 2px;margin-left: 1px">

需要注意Format的格式写法

底层go代码

var data = map[string]interface{}{"keyEvent":searchEvent,"keyOperator":searchOperator,"keyDateBegin":keyDateBegin,"keyDateEnd":keyDateEnd,"dataList":dataList, "totalRecordsNum":totalRecordsNum, "totalPageNum":totalPageNum, "currentPageNum":currentPageNum, "recordsNumPerPage":recordsNumPerPage,"pageData":pageData}

无论是PC端还是手机浏览器，只要支持HTML5都可以正常使用。

image.png

image.png

image.png