Question

我尝试在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: '@Model.TimeEnd'相同的模型（在dd.MM.yyyy HH：mm格式的字符串中）设置了defaultDate，那么西班牙语本地化就消失了，我看到了英文日历！哇。并出现以下错误

moment-with-locales.min.js：1弃用警告：提供的值为不能采用公认的RFC2822或ISO格式。瞬间施工跌落回到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：空，_strict：否，_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）在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）在String。（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）

有什么线索可以解决此问题吗？

Answer 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>

JS

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

Tempusdominus datetimepicker和ASP.NET MVC

1 个答案: