如何设置一个Datepicker的日历在任何时候都可见，而且还可以取选择的日期？

Question

这是我的 code.At 这次日历只有在我按下 TextBox 时才会出现。我尝试将 datepicker 放在 < div > 中，但我无法选择日期。

@model Plotting.Models.CalendarModel
@using (Html.BeginForm("Calendar", "Home"))
{
    <p>   
        Date: @Html.TextBoxFor(m => m.SelectedDate, new { @id = "txtdatepicker", @style = "width:200px;" })
    </p>
    <input type="submit" value="Submit" />
    if (ViewBag.Date != null)
    {
        <p>
            Your Selected Date :@ViewBag.Date
        </p>
    }
}
< script > 
    $(function () {
            $("#txtdatepicker").datepicker();
        }); 
< / script >

这是控制器代码：

          public ActionResult Calendar()
         {
             CalendarModel objdatemodel = new CalendarModel();
             objdatemodel.SelectedDate = "";
             return View(objdatemodel);
         }

         [HttpPost]
         public ActionResult Calendar(CalendarModel objdatemodel)
         {
             ViewBag.Date = objdatemodel.SelectedDate;
             return View(objdatemodel);
         }

Answer 1

您可以将日期选择器放在 div 中并为其提供 altField 选项来更新您的输入。我认为这是最简单的解决方案。看这里：http://jsfiddle.net/ddan/kn3f208j/

HTML:

<input type='text' id='selectedDate'>
<div id="datepicker"></div>

JS:

$(function() {
    $("#datepicker").datepicker({
        altField:"#selectedDate"
    });
});

编辑：

将其应用于您的示例：

@model Plotting.Models.CalendarModel
@using (Html.BeginForm("Calendar", "Home"))
{
    <p>   
        Date: @Html.TextBoxFor(m => m.SelectedDate, new { @id = "selectedDate", @style = "width:200px;" })
        <div id="datepicker"></div>
    </p>
    <input type="submit" value="Submit" />
    if (ViewBag.Date != null)
    {
        <p>
            Your Selected Date :@ViewBag.Date
        </p>
    }
}
< script > 
    $(function () {
            $("#datepicker").datepicker({
                altField:"#selectedDate"
            });
        }); 
< / script >

如何设置一个Datepicker的日历在任何时候都可见，而且还可以取选择的日期？

How to set the calendar of a Datepicker to be visible at all times, but also to be able to take the selected date?

javascript

asp.net-mvc

jquery

datepicker