使用Bootstrap DateTimePicker显示1899年的问题

最新推荐文章于 2021-07-25 17:59:51 发布

HC0220

最新推荐文章于 2021-07-25 17:59:51 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： Bootstrap 文章标签： bootstrap datetimepicker 1899

本文链接：https://blog.youkuaiyun.com/IT_hejinrong/article/details/82455186

Bootstrap 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何解决前端页面中时间框初始化出现1899年的问题，并提供了解决方案，包括正确的格式设置和JS动态生成代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

时间框js和css引入

之所以会出现1899年，是因为输入框与初始化的时间格式不一致导致的，只要在Input框中加入：data-date-format='yyyy-mm-dd hh:ii:ss'，初始化时指定format就可以了。我用的是grails框架做前端页面，也就是gsp页面，不过该框架和jsp，html是通用的。文件引入如下：

<asset:stylesheet src="bootstrap.css"/>
<asset:javascript src="bootstrap-datetimepicker.min.js"/>
<asset:stylesheet src="bootstrap-datetimepicker.min.css"/>
<asset:javascript src="bootstrap-datetimepicker.zh-CN.js"/>

由于我的时间框是动态的，所以通过js代码实现：

index.gsp页面中只需要加入一行代码：

<input type="hidden" id="back_param_num" value=""/>

js动态生成：

$("#param_div_id").append(
    "<div style='padding-top: 5px;'>" +
    "<span>" + data[i].split('#')[2] + "：</span>" +
    "<span class='input-group'>" +
    "<input id='param" + i + "' type='text' data-date-format='yyyy-mm-dd hh:ii:ss'>" +
    "</span>" +
    "</div>"
)

初始化时间框的js代码：

function initDateTimePicker(timePickerArr) {
    if(timePickerArr.length > 0) {
        for(var i in timePickerArr) {
            $("#" + timePickerArr[i]).datetimepicker({//选择年月日
                format: 'yyyy-mm-dd hh:ii:ss',
                language: 'zh-CN',
                weekStart: 0,
                todayBtn: 1,//显示‘今日’按钮
                autoclose: 1,
                todayHighlight: true,
                startView: 2,
                minView: 0,
                clearBtn:true,
            });
            //初始化为当前时间
            $("#" + timePickerArr[i]).datetimepicker('setDate', new Date());
        }
    }
}