無法在視圖的文本框中看到jQuery UI日期時間選擇器

Question

我試圖通過使用以下鏈接將jquery datetime picker放在文本框中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" />
}

更新

從腳本引用中刪除分鍾，因此您只引用一次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”}）;

通過聲明該文本框的ID或類，而不是EditorFor嘗試使用TextboxFor。
@ Html.TextBoxFor（s => s.DtpJqry，新的{id =“ txtDtpJqry”}）

它的作品很好。