Як додати Bootstrap 3 для вибору дати на проект MVC 5 за допомогою механізму Razor?

Мені потрібні деякі вказівки щодо того, як встановити Bootstrap 3 для вибору дати на проект MVC 5 за допомогою движка Razor. Я знайшов це посилання тут, але не зміг змусити його працювати у VS2013.

Копіюючи з прикладу в наступному посиланні вище, я вже зробив наступне:

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/bootstrap-datepicker.js",    // ** NEW for Bootstrap Datepicker
                  "~/Scripts/respond.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/bootstrap-datepicker.css",  // ** NEW for Bootstrap Datepicker
                  "~/Content/site.css"));

Потім я додав скрипт до подання індексу наступним чином

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")

<script type="text/javascript">
    $('.datepicker').datepicker(); //Initialise any date pickers
</script>
}

Тепер, як зателефонувати за допомогою пункту вибору дати сюди?

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

Ця відповідь використовує 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 ready:

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

Ця відповідь просто застосовує 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.

Додайте лише ці два рядки перед властивістю datetime у вашій моделі

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

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

Сподіваюся, це може допомогти тому, хто стикався з моєю ж проблемою.

Ця відповідь використовує плагін Bootstrap DatePicker , який не є рідним для bootstrap.

Переконайтеся, що ви встановили Bootstrap DatePicker через NuGet

Створіть невеликий фрагмент JavaScript і назвіть його DatePickerReady.js, збережіть його в директорії сценаріїв. Це забезпечить роботу навіть у браузерах, що не мають 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"))

Тепер встановіть Тип даних так, щоб, коли використовується 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"}})

і вуаля

Спроба надати стисле оновлення на основі відповіді 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" })
  

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

1. переконайтеся, що ви перевіряєте jquery.js спочатку
2.check layout, переконайтеся, що ви викликаєте "~ / bundles / bootstrap"
3.check layout, see render section Scripts position, it must be after "~ / bundles / bootstrap"
4 .add клас "datepicker" до текстового поля
5.put $ ('. datepicker'). datepicker (); в $ (function () {...});

Вибір дати інтерфейсу щита для MVC . Потужний компонент, який можна інтегрувати за допомогою таких рядків, як:

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

Просто:

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