Tempusdominus datetimepicker 和 ASP.NET MVC答案

【问题标题】：Tempusdominus datetimepicker and ASP.NET MVCTempusdominus datetimepicker 和 ASP.NET MVC
【发布时间】：2018-11-14 10:09:03
【问题描述】：

我尝试在 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 格式的字符串

$(document).ready(function () {
   $('#TimeEnd').datetimepicker({
      locale: 'es', 
    });
});

当我打开页面时，input 具有正确的值，但它在 datetimepicker 中不可见。

更新 #1

如果我通过 defaultDate: '@Model.TimeEnd' 之类的相同模型设置 defaultDate（其中它是格式为 dd.MM.yyyy HH:mm 的字符串），那么西班牙语本地化 消失了，我看到了英文日历！哇。并出现如下错误

moment-with-locales.min.js:1 弃用警告：提供的值是不是公认的 RFC2822 或 ISO 格式。时刻建筑倒塌回到 js Date()，它在所有浏览器中并不可靠，并且版本。不鼓励使用非 RFC2822/ISO 日期格式，并将在即将发布的主要版本中删除。请参阅 http://momentjs.com/guides/#/warnings/js-date/ 了解更多信息。参数：[0] _isAMomentObject：真，_isUTC：假，_useUTC：假， _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) 在弗吉尼亚州 (http://localhost:62959/Scripts/moment-with-locales.min.js:1:22064) 在萨 (http://localhost:62959/Scripts/moment-with-locales.min.js:1:22146) 在 l (http://localhost:62959/Scripts/moment-with-locales.min.js:1:209) 在 k.i.getMoment (http://localhost:62959/Scripts/tempusdominus-bootstrap-4.min.js:6:14261) 在 k.i.defaultDate (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) 在 k.i.options (http://localhost:62959/Scripts/tempusdominus-bootstrap-4.min.js:6:14895)

任何线索如何解决这个问题？

【问题讨论】：

您是否尝试过设置defaultDate 选项？
@StephenMuecke 请看看我更新的问题。
不应该是dd/MM/yyyy HH:mm（正斜杠，而不是点作为分隔符）吗？
@StephenMuecke 好吧...我认为它也可以是点，对吧？即使我使用format: 'DD.MM.YYYY HH:mm', 也无济于事。
defaultDate 可以接受moment 对象，试试defaultDate: moment('@Model.TimeEnd', moment.ISO_8601) - 也值得一读：stackoverflow.com/questions/43101278/…。

标签： asp.net-mvc datetimepicker tempus-dominus-datetimepicker

【解决方案1】：

问题似乎是在搞乱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>

$(document).ready(function () {
    $('#datetimepicker1').datetimepicker({
         locale: 'es'
    });
});

【讨论】：