Question

我需要一些关于如何使用Razor引擎在MVC 5项目上安装Date Picker Bootstrap 3的指导方针。我发现此链接here但无法在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>

Answer 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 ready函数中：

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

Answer 2

此答案只是将type=date attribute应用于HTML input元素，并依赖浏览器提供日期选择器。请注意，即使在2017年，并非所有浏览器都提供自己的日期选择器，因此您可能希望提供退款。

您所要做的就是在视图模型中向属性添加属性。变量Ldate的示例：

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

假设您正在使用MVC 5和Visual Studio 2013。

Answer 3

我希望这可以帮助那些面临同样问题的人。

这个答案使用了 Bootstrap DatePicker插件，这不是bootstrap原生的。

确保通过NuGet安装Bootstrap DatePicker

创建一小段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"))

现在设置数据类型，以便在使用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"}})

和瞧

enter image description here

Answer 4

在模型中的datetime属性之前添加这两行

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

，结果将是： Date Picker in MVC Application

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

在相关视图中，在脚本中＆＃39;部分，启用和自定义datepicker。

@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中以及＆＃34; 31/12/208＆＃34;中的日期格式;这将是：
```
@Html.TextBox("YOUR-STRING-FOR-THE-DATE", "{0:dd/MM/yyyy}", new { @class = "datepicker" })
```

Answer 6

std::wcout << L"{\"data\":\"string\",\"text\":\"\\u00b2\\u00b2\\u064B BOB \\u00b2\\u00b2\\u00b2}" << std::endl;

像这样装饰你的模特。可以使用我使用过的引导日期时间选择器。 https://github.com/Eonasdan/bootstrap-datetimepicker/

我想你已经拥有了bootstrap css和js

的包

您的日期选择器包条目

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

在布局视图中渲染包

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

您的HTML视图

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

在您的观看结尾添加此内容。

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

Answer 7

1.确保你在第一时间参考jquery.js 2.检查布局，确保拨打＆＃34;〜/ bundles / bootstrap＆＃34;
3.检查布局，参见渲染部分脚本位置，它必须在＆＃34;〜/ bundles / bootstrap＆＃34;
之后 4.add class＆＃34; datepicker＆＃34;到文本框
5.put $（＆＃39; .datepicker＆＃39;）。datepicker（）;在$（function（）{...}）;

Answer 8

在您的代码中添加 @type = "date" ：

{ @class = "form-control", placeholder = "Enter Drop-off date here...", @type = "date" }

Answer 9

Checkout Shield UI的Date Picker for MVC。一个功能强大的组件，您可以与以下几行集成：

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

Answer 10

简单：

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

如何使用Razor引擎在MVC 5项目上添加Date Picker Bootstrap 3？

10 个答案: