Tempusdominus datetimepicker 和 ASP.NET MVC
Tempusdominus datetimepicker and 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
具有正确的值 但它在 日期时间选择器 中不可见。
更新#1
如果我通过 defaultDate: '@Model.TimeEnd'
等相同模型设置 defaultDate(它是格式为 dd.MM.yyyy HH:mm 的字符串),那么西班牙语本地化 就消失了而且我看到英文日历了!哇。
并且出现如下错误
moment-with-locales.min.js:1 Deprecation warning: value provided is
not in a recognized RFC2822 or ISO format. moment construction falls
back to js Date(), which is not reliable across all browsers and
versions. Non RFC2822/ISO date formats are discouraged and will be
removed in an upcoming major release. Please refer to
http://momentjs.com/guides/#/warnings/js-date/ for more info.
Arguments: [0] _isAMomentObject: true, _isUTC: false, _useUTC: false,
_l: undefined, _i: 14.08.2018 00:00, _f: null, _strict: false, _locale: [object Object] Error
at Function.createFromInputFallback (http://localhost:62959/Scripts/moment-with-locales.min.js:1:3368)
at wa (http://localhost:62959/Scripts/moment-with-locales.min.js:1:21353)
at va (http://localhost:62959/Scripts/moment-with-locales.min.js:1:22064)
at Sa (http://localhost:62959/Scripts/moment-with-locales.min.js:1:22146)
at l (http://localhost:62959/Scripts/moment-with-locales.min.js:1:209)
at k.i.getMoment (http://localhost:62959/Scripts/tempusdominus-bootstrap-4.min.js:6:14261)
at k.i.defaultDate (http://localhost:62959/Scripts/tempusdominus-bootstrap-4.min.js:6:19874)
at String. (http://localhost:62959/Scripts/tempusdominus-bootstrap-4.min.js:6:14947)
at Function.each (http://localhost:62959/Scripts/jquery-3.3.1.js:360:19)
at k.i.options (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'
});
});
我尝试在 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
具有正确的值 但它在 日期时间选择器 中不可见。
更新#1
如果我通过 defaultDate: '@Model.TimeEnd'
等相同模型设置 defaultDate(它是格式为 dd.MM.yyyy HH:mm 的字符串),那么西班牙语本地化 就消失了而且我看到英文日历了!哇。
并且出现如下错误
moment-with-locales.min.js:1 Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discouraged and will be removed in an upcoming major release. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info. Arguments: [0] _isAMomentObject: true, _isUTC: false, _useUTC: false, _l: undefined, _i: 14.08.2018 00:00, _f: null, _strict: false, _locale: [object Object] Error at Function.createFromInputFallback (http://localhost:62959/Scripts/moment-with-locales.min.js:1:3368) at wa (http://localhost:62959/Scripts/moment-with-locales.min.js:1:21353) at va (http://localhost:62959/Scripts/moment-with-locales.min.js:1:22064) at Sa (http://localhost:62959/Scripts/moment-with-locales.min.js:1:22146) at l (http://localhost:62959/Scripts/moment-with-locales.min.js:1:209) at k.i.getMoment (http://localhost:62959/Scripts/tempusdominus-bootstrap-4.min.js:6:14261) at k.i.defaultDate (http://localhost:62959/Scripts/tempusdominus-bootstrap-4.min.js:6:19874) at String. (http://localhost:62959/Scripts/tempusdominus-bootstrap-4.min.js:6:14947) at Function.each (http://localhost:62959/Scripts/jquery-3.3.1.js:360:19) at k.i.options (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'
});
});