没有模型绑定DateTime字段时如何使用JQueryUI Datepicker？答案

【问题标题】：How to use JQueryUI Datepicker when there is no model to bind the DateTime field?没有模型绑定DateTime字段时如何使用JQueryUI Datepicker？
【发布时间】：2018-12-24 19:41:02
【问题描述】：

我已经在另一个视图上使用了这个日期选择器，一个接收模型的 Create() 视图，然后我可以使用以下方法显示日期选择器：

<link rel="stylesheet"href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

...  
@Html.EditorFor(model => model.OrderDate, new { htmlAttributes = new { @class = "form-control", placeholder = "OrderDate", @readonly = "true" } })

...

@section Scripts
{
@Scripts.Render("~/bundles/jqueryui")
<script type="text/javascript">
    jQuery.validator.methods["date"] = function (value, element) { return true; }
    $(document).ready(function () {
        $("#OrderDate").val("");
        $('input[type=datetime]').datepicker({
            dateFormat: 'dd/mm/yy',
            changeMonth: true,
            changeYear: true,
            yearRange: "-1:+2",
            onClose: function (dateText, inst) {
                $("#cmdEnter").focus();
            }
        });
    });
</script>
}

现在的问题是我需要在视图中使用日期选择器作为顶部的搜索字段之一，我正在尝试按范围实现日期搜索。这个视图是一个索引，这意味着它不接收模型它接收模型集合（在本例中为 PageList）：

@model PagedList.IPagedList<EntregaMedicamentos.Models.PedidoDisprofarmaViewModel>

所以，在这种情况下，我不能使用 model => model.OrderDate，然后我尝试使用 Viewbag 在那里传递该日期，类似于..

@Html.TextBox("searchDateFrom", ViewBag.currentFilter2 as DateTime?, new { @class = "form-control", placeholder = "Desde fecha", @readonly = "true" })

所以我从 EditorFor 更改为 TextBox 并尝试使用 Editor，但日期选择器仍然不想在点击时弹出，有什么想法吗？

这是什么尝试，仍然没有弹出：

@Html.TextBox("searchDateFrom", ViewBag.currentFilter2 as DateTime?, new { @class = "form-control", placeholder = "Desde fecha", @readonly = "true" })

....

@section scripts
{
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jqueryui")
@Styles.Render("~/Content/cssjqryUi")

<script type="text/javascript">
    jQuery.validator.methods["date"] = function (value, element) { return true; }
    $(document).ready(function () {
        $("#searchDateFrom").val("");
        $('input[type=datetime]').datepicker({
            dateFormat: 'dd/mm/yy',
            changeMonth: true,
            changeYear: true,
            yearRange: "-1:+2",
            onClose: function (dateText, inst) {
                $("#cmdSearch").focus();
            }
        });
    });
</script>
...

谢谢！！

【问题讨论】：

标签： asp.net-mvc jquery-ui model-view-controller jquery-ui-datepicker

【解决方案1】：

您可以像这样在TextBox 助手中附加type="datetime" 属性：

@Html.TextBox("searchDateFrom", ViewBag.currentFilter2 as DateTime?, new { @class = "form-control", placeholder = "Desde fecha", 
              @readonly = "readonly", type = "datetime" })

然后在日期选择器中添加与提供的格式匹配的DisplayFormatAttribute：

[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
public DateTime searchDateFrom { get; set; }

请注意，@Html.TextBox() 助手默认生成<input type="text" /> 元素，您需要指定type="datetime" 以启用 jQuery 代码中提供的日期时间日历选择器。

您可以在this fiddle 中查看日期选择器实现示例。

【讨论】：

【解决方案2】：

你可以使用

&lt;input type="datetime" name="ordredate"&gt;

因为@Html.TextBox() 没有生成文本框类型'datetime'。

【讨论】：