Bootstrap datetimepicker未显示日历(或无法正确格式化日期)

时间:2019-10-07 11:37:20

标签: javascript asp.net-mvc

当前,我的问题是日历未显示(告诉我在控件上未正确初始化datetimepicker函数)。

请注意,此处显示的实现是基于可以正常工作的网站上其他地方的实现。

<link href="/Content/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/Scripts/moment.min.js"></script>
<script src="/Scripts/bootstrap-datetimepicker.min.js"></script>

我已经删除了所有脚本,例如数据表和淘汰表,因为我认为它们是多余的,并且所使用的脚本列表非常广泛。 可以在页面here中找到该页面的完整[删除客户端信息的删除]标记。

表单很简单,只需在其上输入.datetimepicker类即可。

<div class="row">
    <div class="col-sm-6">
        <div class="form-group">
            <label class="control-label col-sm-5">Start Date</label>
            <div class="col-sm-7 input-group">
                <input type="text" class="form-control datetimepicker" id="StartDate" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar "></span>
                </span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-5">End Date</label>
            <div class="col-sm-7 input-group">
                <input type="text" class="form-control datetimepicker" id="EndDate" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar "></span>
                </span>
            </div>
        </div>
    </div>
</div>

现在,当我单击这些输入中的任何一个时,它们仅会为我提供我过去输入的值的自动完成选项。

过去经常使用这种方法,因此您需要在页面底部使用以下方法初始化javascript:

$(document).ready(function () {
    $("#StartDate").datetimepicker();
    $("#EndDate").datetimepicker();
});

但是,在这种情况下,这似乎不是必需的,因为这些datetimepickers所在的页面不起作用。

如果我确实以这种方式初始化控件,则会显示日历,但是无论我使用locale选项还是format选项as indicated in this SO Answer,它都不会为日期提供正确的格式,我需要的是yyyy/mm/dd

理想情况下,我希望能够看到日历弹出窗口,并使其以正确的格式显示在输入中的日期。如果有人可以指出我在做什么错,我将不胜感激。

这是一个小提琴:https://jsfiddle.net/h3809a7r/

2 个答案:

答案 0 :(得分:0)

请您试试这个

$("#StartDate").datetimepicker({
    format: 'YYYY-MM-DD HH:mm',
    showClose: true,
    showClear: true
});

答案 1 :(得分:0)

我刚刚导入了这些库,并且现在可以正常工作

Javascript:

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js
https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js

CSS

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css

enter image description here