如何将 bootstrap-datepicker 作为 MVC 5 中的组件安装？

Posted 2023-05-07

【中文标题】如何将 bootstrap-datepicker 作为 MVC 5 中的组件安装？

【英文标题】：How to install bootstrap-datepicker as a component in MVC 5?

【发布时间】：2014-02-02 21:50:56

【问题描述】：

使用这个link 和这个here 加上来自here 的答案，我能够将组件安装为“文本输入”类型。现在，我想将其更改为“组件”类型 但我不知道如何使用 Razor 引擎在 MVC5 中正确实现它。

<div class="input-append date">

$('#sandbox-container .input-append.date').datepicker(
todayBtn: "linked",
autoclose: true,
todayHighlight: true

);

这是我尝试过的，但不起作用：字形显示正确。如果单击文本框，则会弹出日历，但单击字形不会执行任何操作。如果我删除 “#sandbox-container”来自下面的脚本，然后在单击字形时弹出日历，但是它独立于文本中的日历，并且选择日期不会将其移动到文本输入控件中。

    <div class="input-group">
        @html.TextBoxFor(model => model.PickUpDate, new  @class = "form-control datepicker ")
        <span class="input-group-addon input-append date  glyphicon glyphicon-th"></span>
    </div>

    $(function ()                       // will trigger when the document is ready
        $('#sandbox-container .input-append.date').datepicker(
            todayBtn: "linked",
            autoclose: true,
            todayHighlight: true
        );
    );

</script>

【问题讨论】：

“它不起作用”不是对您问题的可接受描述。您是否收到错误消息？如果是这样，请将其添加到您的答案中。否则，请描述正在发生/未发生的事情。

我已经更新了问题

【参考方案1】：

我在使用 bootstrap-datetimepicker（基于 bootstrap-datepicker）时遇到了类似的问题。组件代码似乎没有为与 Bootstrap 3 兼容而更新。为插件寻找特定格式（Bootstrap 2 样式）而不是依赖于“按钮”上的特定类有点愚蠢。我通过简单地实现我自己的组件设置来修复它（基本上绕过了内置版本）。

HTML

<div class="input-group">
    @Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue.ToString(), new  type = "date", @class = "form-control" )
    <span class="input-group-btn">
        <button type="button" class="btn btn-default datetimepicker-reset">
            <i class="fa fa-times"></i>
        </button>
        <button type="button" class="btn btn-default datetimepicker-show">
            <i class="fa fa-calendar"></i>
        </button>
    </span>
</div>

这是我项目的直接粘贴，所以让我解释一下。首先，我在 EditorTemplate 中有这个（这对你来说也不是一个坏主意）。 Html.TextBox 位是为此目的而定制的。为 name 参数传递空字符串让 Razor 用正确的字段名称填充它，ViewData.TemplateInfo.FormattedModelValue 是您在不为视图指定模型的情况下获得当前值的方式。此外，我使用的是 font-awesome 而不是 Bootstrap 中包含的默认字形图标，因此您可以相应地调整字体类。该代码进入Views\Shared\EditorTemplates\Date.cshtml。然后，您只需要指定属性的数据类型（如果您还没有）：

[DataType(DataType.Date)]
public DateTime MyDateProperty  get; set; 

最后，在视图中渲染所有 HTML 所需的只是：

@Html.EditorFor(m => m.MyDateProperty)

然后，您只需要一点额外的 javascript 即可将所有内容连接起来。我建议保持这个通用性，这样您就不需要为日期字段的每个实例一遍又一遍地编写相同的代码。我只选择“日期”类型的所有输入：

$('input[type=date]').datetimepicker()
    .each(function () 
        var $input = $(this);
        var $parent = $input.parent();
        $parent.find('.datetimepicker-reset').on('click', function () 
            $input.val('');
            $input.datetimepicker('update');
        );
        $parent.find('.datetimepicker-show').on('click', function () 
            $input.datetimepicker('show');
        );
    );

这里，我只是使用bootstrap-datetimepicker的手动show方法。对于重置/清除按钮，您只需将值设置为空，然后告诉 bootstrap-datetimepicker 进行更新，以便它识别这个新值，而不是仍然显示在其控件中选择的旧值。

【讨论】：

那个javascript让我头疼不已！谢谢！你摇滚！