Vfrdtyky

I try to use https://tempusdominus.github.io/bootstrap-4/ in ASP.NET MVC project.

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>

Where model.TimeEnd is string in the format dd.MM.yyyy HH:mm

JS

$(document).ready(function () {

   $('#TimeEnd').datetimepicker({

      locale: 'es', 

    });

});

When I open page the input has correct value but it is not visible in the datetimepicker.

UPDATE #1

If I set defaultDate via the same model like defaultDate: '@Model.TimeEnd' (where it is string in the format dd.MM.yyyy HH:mm) then the Spanish localization is gone and I see English calendar! Wow.
And the following error appears

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)

Any clue how to fix this issue?

It seems the probelm was around messing up the input and wraping div ids.

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'

    });

});