asp.net-mvc - Tempusdominus datetimepicker 和 ASP.NET MVC
问题描述
我尝试在 ASP.NET MVC 项目中使用https://tempusdominus.github.io/bootstrap-4/ 。
HTML
<div class="input-group date" data-target-input="nearest">
@Html.TextBoxFor(model => model.TimeEnd,
new { @class = "form-control form-control-sm datetimepicker-input",
@data_toggle = "datetimepicker",
@data_target = "#TimeEnd",
type="text"
})
<div class="input-group-append" data-target="#TimeEnd" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
model.TimeEnd
格式中的字符串在哪里dd.MM.yyyy HH:mm
JS
$(document).ready(function () {
$('#TimeEnd').datetimepicker({
locale: 'es',
});
});
当我打开页面时,该input
值具有正确的值,但在datetimepicker中不可见。
更新#1
如果我通过相同的模型设置 defaultDate defaultDate: '@Model.TimeEnd'
(其中它是格式为 dd.MM.yyyy HH:mm 的字符串),那么西班牙语本地化就消失了,我看到了英文日历!哇。并出现以下错误
moment-with-locales.min.js:1 弃用警告:提供的值不是可识别的 RFC2822 或 ISO 格式。moment 构造回退到 js Date(),这在所有浏览器和版本中并不可靠。不鼓励使用非 RFC2822/ISO 日期格式,并将在即将发布的主要版本中删除。请参阅 http://momentjs.com/guides/#/warnings/js-date/了解更多信息。参数:[0] _isAMomentObject:true,_isUTC:false,_useUTC:false,_l:未定义,_i:14.08.2018 00:00,_f:null,_strict:false,_locale:[object Object] Function.createFromInputFallback 错误(http://localhost:62959/Scripts/moment-with-locales.min.js:1:3368 ) 在 wa ( http://localhost:62959/Scripts/moment-with-locales.min.js:1:21353 ) 在 va (http://localhost:62959/Scripts/moment-with-locales.min.js:1:22064 ) 在 Sa ( http://localhost:62959/Scripts/moment-with-locales.min.js:1:22146 ) 在 l ( http://localhost:62959/Scripts/moment-with-locales.min.js:1:209 ) 在 kigetMoment ( http://localhost:62959/Scripts/tempusdominus-bootstrap-4.min.js :6:14261 ) 在字符串的 kidefaultDate ( http://localhost:62959/Scripts/tempusdominus-bootstrap-4.min.js:6:19874 )。( http://localhost:62959/Scripts/tempusdominus-bootstrap-4.min.js:6:14947 ) 在 Function.each ( http://localhost:62959/Scripts/jquery-3.3.1.js:360: 19 ) 在 kioptions (http://localhost:62959/Scripts/tempusdominus-bootstrap-4.min.js:6:14895)
任何线索如何解决这个问题?
解决方案
似乎问题在于弄乱input
和包装div
ID。
HTML
<div class="form-group row">
@Html.Label("Finish", new { @class = "col-sm-2 col-form-label", @for = "TimeStart2" })
<div class="col-sm-10">
<div class="form-group">
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
<input id="TimeEnd" name="TimeEnd" value="@Model.TimeEnd" type="text" class="form-control form-control-sm datetimepicker-input" data-target="#datetimepicker1" />
<div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
</div>
JS
$(document).ready(function () {
$('#datetimepicker1').datetimepicker({
locale: 'es'
});
});
推荐阅读
- css - 如何使用 css 使添加到购物车按钮看起来像这个图像?
- ios - 如果重新输入 UITabBarController(),为什么不显示 UINavigationBar?
- c++ - 在开关盒中返回布尔值
- java - 如何在java中使用网络设备检查互联网连接?
- hadoop - 如何将文件从客户端并行上传到 Hadoop 集群
- javascript - jquery缩放和引导多项目轮播的问题
- android - 在 react-native 中处理可选文本上的上下文菜单
- spring - 保存具有一对多关系的实体时更新 Spring Cache
- php - Sabre 会话令牌即将到期
- python - 如何在 python 3.6 中创建 MSI 或 exe