Как добавить загрузчик даты Picker Bootstrap 3 в проекте MVC 5 с использованием механизма Razor?

Ответ 1

В этом ответе используется JQuery UI Datepicker, который является отдельным включением. Есть и другие способы сделать это, не включая jQuery UI.

Во-первых, вам просто нужно добавить класс datepicker в текстовое поле, в дополнение к form-control:

<div class="form-group input-group-sm">
    @Html.LabelFor(model => model.DropOffDate)
    @Html.TextBoxFor(model => model.DropOffDate, new { @class = "form-control datepicker", placeholder = "Enter Drop-off date here..." })
    @Html.ValidationMessageFor(model => model.DropOffDate)
</div>

Затем, чтобы быть уверенным, что javascript запущен после рендеринга текстового поля, вы должны поместить вызов datepicker в функцию готовности jQuery:

<script type="text/javascript">
    $(function () { // will trigger when the document is ready
       $('.datepicker').datepicker(); //Initialise any date pickers
    });
</script>

Ответ 2

Этот ответ просто применяет атрибут type=date к элементу input HTML и полагается на браузер, предоставляющий средство выбора даты. Обратите внимание, что даже в 2017 году не все браузеры предоставляют свои собственные средства выбора даты, поэтому вы можете захотеть сделать отступление.

Все, что вам нужно сделать, это добавить атрибуты к свойству в модели представления. Пример для переменной Ldate:

[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
Public DateTime Ldate {get;set;}

Предполагая, что вы используете MVC 5 и Visual Studio 2013.

Ответ 3

Надеюсь, это поможет кому-то, кто столкнулся с моей проблемой.

В этом ответе используется Bootstrap DatePicker Plugin, который не является родным для начальной загрузки.

Убедитесь, что вы устанавливаете Bootstrap DatePicker через NuGet

Создайте небольшой фрагмент JavaScript и назовите его DatePickerReady.js, сохраните его в директории Scripts. Это позволит убедиться, что он работает даже в браузерах без HTML5, хотя в настоящее время их немного.

if (!Modernizr.inputtypes.date) {
    $(function () {

       $(".datecontrol").datepicker();

    });
}

Задайте пакеты

bundles.Add(New ScriptBundle("~/bundles/bootstrap").Include(
              "~/Scripts/bootstrap.js",
              "~/Scripts/bootstrap-datepicker.js",
              "~/Scripts/DatePickerReady.js",
              "~/Scripts/respond.js"))

bundles.Add(New StyleBundle("~/Content/css").Include(
              "~/Content/bootstrap.css",
              "~/Content/bootstrap-datepicker3.css",
              "~/Content/site.css"))

Теперь установите Datatype, чтобы при использовании EditorFor MVC определит, что должно использоваться.

<Required>
<DataType(DataType.Date)>
Public Property DOB As DateTime? = Nothing

Ваш код просмотра должен быть

@Html.EditorFor(Function(model) model.DOB, New With {.htmlAttributes = New With {.class = "form-control datecontrol", .PlaceHolder = "Enter Date of Birth"}})

и вуаля

Ответ 4

Добавьте только эти две строки перед свойством datetime в вашей модели

[DataType(DataType.Date)] 
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]

и результат будет:

Ответ 5

Попытка предоставить краткое обновление, основанное на ответе Enzero.

• Установите пакет Bootstrap.Datepicker.

  PM> install-package Bootstrap.Datepicker
  ...
  Successfully installed 'Bootstrap.Datepicker 1.7.1' to ...
  

• В AppStart/BundleConfig.cs добавьте связанные сценарии и стили в комплекты.

  bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
        //...,
        "~/Scripts/bootstrap-datepicker.js",
        "~/Scripts/locales/bootstrap-datepicker.YOUR-LOCALE-CODE-HERE.min.js"));
  
  bundles.Add(new StyleBundle("~/Content/css").Include(
        ...,
        "~/Content/bootstrap-datepicker3.css"));
  

• В связанном представлении в разделе сценариев включите и настройте средство выбора даты.

  @section scripts{
      <script type="text/javascript">
          //...
          $('.datepicker').datepicker({
              format: 'dd/mm/yyyy', //choose the date format you prefer
              language: "YOUR-LOCALE-CODE-HERE",
              orientation: 'left bottom'
          });
      </script>
  

• В конце концов добавьте класс datepicker в связанный элемент управления. Например, в TextBox и для формата даты, такого как "31/12/2018", это будет:

  @Html.TextBox("YOUR-STRING-FOR-THE-DATE", "{0:dd/MM/yyyy}", new { @class = "datepicker" })
  

Ответ 6

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

украсьте свою модель следующим образом. я могу использовать выборку выбора даты бутстрапа. https://github.com/Eonasdan/bootstrap-datetimepicker/

Я полагаю, у вас уже есть пакеты для bootstrap css и js

Ваши записи в списке выбора даты

 bundles.Add(new ScriptBundle("~/bundles/datePicker").Include(
           "~/Scripts/moment.min.js",
           "~/Scripts/bootstrap-datetimepicker.min.js"));

        bundles.Add(new StyleBundle("~/Content/datepicker").Include(
                 "~/Content/bootstrap-datetimepicker.min.css"));

Отобразить пакеты в представлении макета

@Styles.Render("~/Content/datepicker")
@Scripts.Render("~/bundles/datePicker")

Ваш HTML в виде

<div class="form-group">
        @Html.LabelFor(model => model.BirthDate, htmlAttributes: new { @class = "lead col-md-2" })
        <div class="col-md-10">
            @Html.TextBoxFor(model => model.BirthDate, new { @class = "datetimepicker form-control" })
            @Html.ValidationMessageFor(model => model.BirthDate, "", new { @class = "text-danger" })
        </div>
</div>

В конце вашего представления добавьте это.

<script>
    $(document).ready(function () {
        $('.datetimepicker').datetimepicker({
            format: 'lll'
        });
    });
</script>

Ответ 7

1. убедитесь, что вы сначала вернете jquery.js
2.check layout, убедитесь, что вы называете "~/bundles/bootstrap"
3.check layout, см. Раздел рендеринга Позиция скриптов, это должно быть после "~/bundles/bootstrap"
4.add класс "datepicker" в текстовое поле
5.put $('. Datepicker'). Datepicker(); в $(function() {...});

Ответ 8

Здравствуйте, мне было интересно, если кто-нибудь знает, почему значение не отображается, когда вы установите значение Model.BirthDate. У меня что-то похожее

@Html.TextBoxFor(model => model.EndDate, new {@type = "date", @class= "datepicker для управления формой", @Value = Model.EndDate})

Когда я проверяю код, я вижу правильное отображение даты, но все, что я получаю, это MM-dd-yyyy в текстовом поле с доступным средством выбора даты. Я хочу, чтобы он отображал дату из базы данных с помощью средства выбора даты, если пользователю необходимо изменить его.

Ответ 9

Checkout Shield UI Выбор даты для MVC. Мощный компонент, который вы можете интегрировать с несколькими строками типа:

@(Html.ShieldDatePicker()
    .Name("datepicker"))

Ответ 10

Простой:

[DataType(DataType.Date)]
Public DateTime Ldate {get;set;}