Как сделать календарь в MVC?

Question

[Nikita]

Добрый день, прошу помочь.
Возникла проблема при добавлении календаря в index страници
1)Есть Sql таблица для объекта DateTo и Date End я присвоил тип дати Date(тут тоже вопрос, возможно нужно было оставить string?

в данный момент код имеет вот такой вид, очень прошу помочь разобратсья как в этом Razor синтаксис сделать правильно календарь :D

<div class="form-group">
        @Html.LabelFor(model => model.DateEnd, "Дата закінчення поїздки", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.DateEnd, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.DateEnd, "", new { @class = "text-danger" })
        </div>
    </div>

Заранее благодарю за помощь.

Answer 1

[igorsmi]

Я так понял вам нужен просто input с типом date, его нужно просто указать в атрибутах

@Html.EditorFor(model => model.DateEnd, new { htmlAttributes = new { @class = "form-control", type="date" } })

Comments

[Nikita]

Мне нужен input но чтобы в нем можно было использовать календарь как Bootstrap *DateTimePicker* или любой другой(Выбор даты кликом)

[Nikita]

Попробовал, спасибо))

[Nikita]

Но все же, может подскажите если знаете, как в этот же пример добавить DateTimePicker от bootstrap

[igorsmi]

<div class="form-group">
        @Html.LabelFor(model => model.DateEnd, "Дата закінчення поїздки", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
             <div class="input-group" id="datetimepicker1">
                @Html.EditorFor(model => model.DateEnd, new { htmlAttributes = new { @class = "form-control" } })
                  <span class="input-group-addon">
                  <span class="glyphicon glyphicon-calendar"></span>
                </span>
  </div>
            @Html.ValidationMessageFor(model => model.DateEnd, "", new { @class = "text-danger" })
        </div>
    </div>

и в скриптах прописать

<script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>

[Nikita]

Вот так у меня выходит.

Скриншот

Что должно быть указанно в моделях ? в моем случае

[DataType(DataType.Date)]
public DateTime DateEnd { get; set; }

и с испольщованием скрипта, все равно уже включается обычный календарь, не boostrap

[igorsmi]

Ты подключил файл стилей bootstrap-datetimepicker.min.css и скрипты bootstrap-datetimepicker.min.js, bootstrap.min.js и jquery соответственно? Если нет то скачай их и подключи.
Плюс этот [DataType(DataType.Date)] атрибут не нужен, и в htmlAttributes не указывай тип date

[igorsmi]

Никита Тысячный, и вот собственно документация по datetimepicker здесь