Làm thế nào để thêm Date Picker Bootstrap 3 trên dự án MVC 5 bằng cách sử dụng công cụ Razor?

Tôi cần một số dòng hướng dẫn về cách cài đặt Date Picker Bootstrap 3 trên dự án MVC 5 sử dụng công cụ Razor. Tôi đã tìm thấy liên kết này ở đây nhưng không thể làm cho nó hoạt động trong VS2013.

Sao chép từ ví dụ trong liên kết sau ở trên, tôi đã thực hiện như sau:

            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"));

Sau đó, tôi đã thêm tập lệnh vào chế độ xem chỉ mục như sau

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

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

Bây giờ, làm thế nào để gọi bộ chọn ngày ở đây?

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

Câu trả lời này sử dụng jQuery UI Datepicker , là một bao gồm riêng biệt. Có nhiều cách khác để làm điều này mà không cần bao gồm giao diện người dùng jQuery.

Đầu tiên, bạn chỉ cần thêm datepickerlớp vào hộp văn bản, ngoài 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>

Sau đó, để đảm bảo javascript được kích hoạt sau khi hộp văn bản được hiển thị, bạn phải đặt lệnh gọi datepicker trong hàm sẵn sàng của jQuery:

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

Câu trả lời này chỉ đơn giản áp dụng type=datethuộc tính cho inputphần tử HTML và dựa vào trình duyệt để cung cấp bộ chọn ngày. Lưu ý rằng ngay cả trong năm 2017, không phải tất cả các trình duyệt đều cung cấp công cụ chọn ngày của riêng họ, vì vậy bạn có thể muốn cung cấp dự phòng.

Tất cả những gì bạn phải làm là thêm thuộc tính vào thuộc tính trong mô hình chế độ xem. Ví dụ cho biến Ldate:

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

Giả sử bạn đang sử dụng MVC 5 và Visual Studio 2013.

Chỉ thêm hai dòng này trước thuộc tính datetime trong mô hình của bạn

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

và kết quả sẽ là:

Tôi hy vọng điều này có thể giúp một người nào đó đang phải đối mặt với vấn đề tương tự của tôi.

Câu trả lời này sử dụng Plugin Bootstrap DatePicker , không có nguồn gốc cho bootstrap.

Đảm bảo bạn cài đặt Bootstrap DatePicker thông qua NuGet

Tạo một đoạn JavaScript nhỏ và đặt tên là DatePickerReady.js lưu nó trong Scripts dir. Điều này sẽ đảm bảo nó hoạt động ngay cả trong các trình duyệt không phải HTML5 mặc dù ngày nay rất ít.

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

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

    });
}

Đặt các gói

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"))

Bây giờ hãy đặt Datatype để khi EditorFor được sử dụng, MVC sẽ xác định những gì sẽ được sử dụng.

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

Mã chế độ xem của bạn phải là

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

và Voila

Cố gắng cung cấp một bản cập nhật ngắn gọn, dựa trên câu trả lời của Enzero .

• Cài đặt gói Bootstrap.Datepicker .

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

• Trong AppStart / BundleConfig.cs , thêm các tập lệnh và kiểu liên quan trong các gói.

  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"));
  

• Trong giao diện liên quan, trong phần tập lệnh, hãy bật và tùy chỉnh trình chọn ngày.

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

• Cuối cùng thêm datepicker lớp trong việc kiểm soát liên quan. Ví dụ: trong TextBox và định dạng ngày tương tự như "31/12/2018", điều này sẽ là:

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

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

trang trí mô hình của bạn như thế này. có thể sử dụng công cụ chọn ngày giờ trong bootstrap mà tôi đã sử dụng công cụ này. https://github.com/Eonasdan/bootstrap-datetimepicker/

Tôi cho rằng bạn đã có các gói cho bootstrap css và js

Các mục nhập gói bộ chọn ngày của bạn

 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"));

Hiển thị các gói trên Chế độ xem bố cục của bạn

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

HTML của bạn trong chế độ xem

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

Ở cuối chế độ xem của bạn, hãy thêm điều này.

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

1. đảm bảo rằng bạn đã tham khảo jquery.js lúc đầu 2.
kiểm tra bố cục, đảm bảo bạn gọi "~ / bó / bootstrap"
3. kiểm tra bố cục, xem phần kết xuất Vị trí tập lệnh, nó phải nằm sau "~ / bó / bootstrap"
4 .add lớp "datepicker" vào hộp văn bản
5.put $ ('. datepicker'). datepicker (); trong $ (function () {...});

Checkout Shield UI's Date Picker for MVC . Một thành phần mạnh mẽ mà bạn có thể tích hợp với một vài dòng như:

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

Đơn giản:

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