无法在视图中的文本框中看到jquery日期选择器

Question

我试图使用下面的链接Jquery日期选择器将jquery选择器放到文本框中

当我单击日期文本框时，我无法在视图中看到日期时间选择器，为此，我已经这样做了。这是我的观点

@Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery-ui-1.8.20.js"></script>
<script src="~/Scripts/jquery-ui-1.8.20.min.js"></script>
<script src="~/Scripts/RangeDateValidator.js"></script>
<script src="~/Scripts/jquerydatetimepicker.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
         $('.date').datepicker({ dateFormat: "dd/mm/yy" });
       // $('.date').datetimepicker();
    });
</script>
@model MvcSampleApplication.Models.DateEditModel
@{
    ViewBag.Title = "EditDateTimePick";
    //Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>EditDateTimePick</h2>
@using (Html.BeginForm())
{ 
    @Html.EditorFor(s=>s.DtpJqry)
    <input id="submit" name="submit" type="submit" value="Save" />
}

这是我的控制器部分

public class DateTimePickersController : Controller
{       
    public ActionResult Index()
    {
        return View("EditDateTimePick");
    }
    [HttpGet]
    public ActionResult Edit()
    {
        DateEditModel model = new DateEditModel();
        {
            var datetimechange = new DatePickerJquery { Name = "Raj", date = new DateTime(2010, 12, 15) };           
        };
        return View(model);
    }
    public ActionResult Edit(DatePickerJquery dtpjquery)
    {
        string message = null;
        if (ModelState.IsValid)
        {
            message = "Saved" + DateTime.Now;            
        }
        DateEditModel models = new DateEditModel { 
              DtpJqry = dtpjquery,
              Message = message                        
        };
        return View(models);
    }
}

这是另一种观点

@model DateTime
@Html.TextBox("", Model.ToString("dd/MM/yyyy"), new { @class = "date" })

修改视图：

@Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery-ui-1.8.20.js"></script>
<script src="~/Scripts/RangeDateValidator.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
         $('.date').datepicker({ dateFormat: "dd/mm/yy" });
       // $('.date').datetimepicker();
    });
</script>
@model MvcSampleApplication.Models.DateEditModel
@{
    ViewBag.Title = "EditDateTimePick";
    //Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>EditDateTimePick</h2>
@using (Html.BeginForm())
{ 
    @Html.EditorFor(s=>s.DtpJqry)
    <input id="submit" name="submit" type="submit" value="Save" />
}

有谁能给我一些建议吗?如果它不显示日期选择器的话，你会非常感激我的，谢谢.

Answer 1

你快到了。您可以让日期选择器使用类date查看所有标记，只需将该类添加到您的字段中即可。

<h2>EditDateTimePick</h2>
@using (Html.BeginForm())
{ 
    @Html.EditorFor(s=>s.DtpJqry, new { Class="date" })
    <input id="submit" name="submit" type="submit" value="Save" />
}

更新

从脚本引用中取出min，因此您只引用jQuery UI一次：

<script src="~/Scripts/jquery-ui-1.8.20.js"></script>
<script src="~/Scripts/RangeDateValidator.js"></script>
<script src="~/Scripts/jquerydatetimepicker.js"></script>

更新2

模板部分视图需要存在于特定的文件夹名称中，而部分视图文件的名称应该是类型的名称。

EditorTemplates -用于编辑器或

DisplayTemplates -用于显示

- Shared
    -EditorTemplates
        DateTime.cshtml

这将允许折叠语法工作：

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

Answer 2

$(#txtDtpJqry‘).datepicker({ dateFormat："dd/mm/yy“})；

不要使用EditorFor，而是通过声明该文本框的id或类来尝试TextboxFor。

@Html.TextBoxFor(s=>s.DtpJqry，new { id = "txtDtpJqry“})

它很好用。