填充HTML5日期选择器所传递从模型数据 [英] Populating HTML5 Datepicker With Data Passed From A Model

查看:136
本文介绍了填充HTML5日期选择器所传递从模型数据的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在做一个项目一个基本的日程安排应用程序。我们已经实现了一个简单的日期时间选择器,以缓解选择用于我们的活动开始和结束时间/日期的过程。该人士$ ​​C $ c表示是这样的:

 <输入类型=日期时间本地NAME =开始时间ID =字段1/>

结束时间日历是相同的限制的名称。这适用于在服用日期和时间的事件完美的罚款,我们是与它很高兴。问题是,要编辑条目时,日历不从模型数据作为填充视图中的其他元素做。该视图中的其它元素使用脚手架项目生成的HTML助手,所以没有问题。我们会使用默认选项为创建DateTime对象,但对于这个文本框输入不考虑用户足够友好的实现。

我做了一些环顾四周,似乎压光机的价值可以用VALUE =进行设置。剃刀语法似乎是有可能的选择,但我没有参照系,由于通过HTML辅助正在处理的其他元素。任何人都可以阐明如何最好地处理这个问题?我已经包括我们的参考相关的控制器的编辑部分。

 公众的ActionResult编辑(INT?ID)
    {
        如果(ID == NULL)
        {
            返回新的HTTPStatus codeResult(的HTTPStatus code.BadRequest);
        }
        请求请求= db.Requests.Find(ID);
        如果(要求== NULL)
        {
            返回HttpNotFound();
        }
        ViewBag.AccountId =新的SelectList(db.Accounts,ID,名字,request.AccountId);
        ViewBag.RoomId =新的SelectList(db.Rooms,ID,ID,request.RoomId);
        返回查看(要求);
    }


解决方案

您可以使用标准的佣工来渲染HTML5日期选择器(你会得到模型绑定和不显眼验证的好处)。假设你的模型具有财产公共DateTime的开始时间{搞定;组; } ,然后

  @ Html.TextBoxFor(M = GT; m.StartTime,{0:秒},新{@type =日期时间本地})

或使用速记格式{0:YYYY-MM-DDTHH:MM:SS}

I'm working on making a basic scheduling application for a project. We've implemented a simple DateTime picker to ease the process of selecting a start and end time/date for our events. The source code for this is:

<input type="datetime-local" name="starttime" id="field1" />

The ending time calendar is the same barring the name. This works perfectly fine for taking in dates and time for events and we're quite happy with it. The issue is that when going to edit an entry the calendar does not populate with data from the model as other elements in the view do. Other elements within the view are using HTML helpers generated by scaffolding the project, so no problems there. We'd use the default option for the DateTimes, but textbox inputs for this aren't considered user friendly enough to implement.

I've done some looking around and it seems that the value of the calenders can be set using "value =". Razor syntax seems to be the likely choice, but I have no frame of reference due to other elements being handled by Html helpers. Can anyone clarify on how best to approach this issue? I've included our editing portion of the associated controller for reference.

 public ActionResult Edit(int? id)
    {
        if (id == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }
        Request request = db.Requests.Find(id);
        if (request == null)
        {
            return HttpNotFound();
        }
        ViewBag.AccountId = new SelectList(db.Accounts, "Id", "FirstName", request.AccountId);
        ViewBag.RoomId = new SelectList(db.Rooms, "Id", "Id", request.RoomId);
        return View(request);
    }

解决方案

You can use the standard helpers to render a HTML5 date picker (and you get the benefits of model binding and unobtrusive validation). Assuming your model has property public DateTime StartTime { get; set; }, then

@Html.TextBoxFor(m => m.StartTime, "{0:s}", new { @type = "datetime-local" })

or using the longhand format "{0:yyyy-MM-ddTHH:mm:ss}"

这篇关于填充HTML5日期选择器所传递从模型数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆