当前,我的问题是日历未显示(告诉我在控件上未正确初始化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/
答案 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