1

次のリンクを使用して、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を表示しない方法について、誰かが何かアイデアを提案してくれませんか?

4

2 に答える 2

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 を 1 回だけ参照するようにします。

<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)
于 2013-07-27T04:24:24.420 に答える