Question

我正在尝试使用以下链接{javascript日历时间选择器Jquery UI Date time Picker

当我点击日期文本框时，我无法在视图中看到日期时间选择器为了这个目的，我这样做了.. 这是我的看法

@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" />
}

任何人都会建议任何关于如何不显示datetimepicker的想法，我会非常感激非常感谢...

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 =＆gt; s.DtpJqry，new {id =“txtDtpJqry”}）

它的工作正常。

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

2 个答案: