【问题标题】:Bootstrap datetimepicker isn't showing calendar (or won't format the date correctly)Bootstrap datetimepicker 未显示日历(或无法正确格式化日期)
【发布时间】:2020-02-04 16:57:06
【问题描述】:

目前,我的问题是日历没有显示(告诉我 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();
});

然而,在这种情况下,这似乎没有必要,因为这些日期时间选择器工作的页面没有这样做。

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

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

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

【问题讨论】:

  • 添加我提到的document.ready 脚本后会弹出日历,但日期格式没有变化。仍在错误地使用mm/dd/yyyy
  • @kevinSpaceyIsKeyserSöze 你真的是想告诉我,我花了 12 多个小时来抨击的问题是因为我没有指定格式,好像这不是我的第一件事尝试并丢弃,因为它对我的情况没有影响?

标签: javascript asp.net-mvc


【解决方案1】:

你可以试试这个

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

【讨论】:

  • 没有区别,但感谢您的回答。由于您是社区的新手,如果您想改进它,我建议您查看how to answer。答案应说明建议的解决方案为何有效以及如何解决问题。
【解决方案2】:

我刚刚导入了这些库,它现在可以工作了

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

JsFiddle Link with your code

【讨论】:

猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-04-10
  • 2014-12-20
  • 1970-01-01
  • 2019-10-15
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多