Available in the Full Version
Editors - Date Editor MVC
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
Book your flight
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
This sample shows basic options of the igDateEditor using MVC wrapper.
Code View
Copy to Clipboard
@using Infragistics.Web.Mvc
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<style>
h3 {
font-size: 20px;
margin-bottom: 20px;
}
.group-fields {
margin-bottom: 10px;
}
.group-fields label {
display: block;
line-height: 18px;
}
.group-fields .inline {
display: inline;
}
.group-fields .ui-igcheckbox-normal {
margin-right: 5px;
float: left;
}
.group-fields .ui-igedit-container {
width: 230px;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.group-fields.clearfix > div {
float: left;
margin-right: 10px;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/modules/i18n/regional/infragistics.ui.regional-i18n.js"></script>
</head>
<body>
<h3>Book your flight</h3>
<div class ="group-fields">
<label for="currentTime">Right now it is</label>
@(Html.Infragistics().DateEditor()
.ID("currentTime")
.DateInputFormat("dateTime")
.Value(DateTime.Now)
.Render()
)
</div>
<div class="group-fields clearfix">
<div>
<label for="departure">Departure</label>
@(Html.Infragistics().DateEditor()
.ID("departure")
.DateInputFormat("ddd, MMM d, yyyy")
.Value(DateTime.Today)
.AddClientEvent(EditorClientEvents.ValueChanged, "valueChanged")
.Render()
)
</div>
<div>
<label for="departureTime">Around</label>
@(Html.Infragistics().DateEditor()
.ID("departureTime")
.Width(100)
.DateInputFormat("hh:mm")
.Value(DateTime.Now)
.ButtonType(TextEditorButtonType.Spin)
.Render()
)
</div>
</div>
<div class="group-fields clearfix">
<div>
<label for="return">Return</label>
@(Html.Infragistics().DateEditor()
.ID("return")
.DateInputFormat("ddd, MMM d, yyyy")
.Value(DateTime.Now.AddDays(1))
.Render()
)
</div>
<div>
<label for="returnTime">Around</label>
@(Html.Infragistics().DateEditor()
.ID("returnTime")
.Width(100)
.DateInputFormat("hh:mm")
.Value(DateTime.Now)
.ButtonType(TextEditorButtonType.Spin)
.Render()
)
</div>
</div>
<div class="group-fields">
@(Html.Infragistics().CheckBoxEditor()
.ID("oneWayTicket")
.Checked(false)
.AddClientEvent(EditorClientEvents.ValueChanged, "oneWayTicket")
.Render()
)
<label for="oneWayTicket">One way ticket</label>
</div>
<script type="text/javascript">
function valueChanged(evt, ui) {
if (ui.newValue instanceof Date) {
var nextDay = new Date(ui.newValue.getTime() + 24 * 60 * 60 * 1000);
$("#return").igDateEditor("option", "value", nextDay);
}
}
function oneWayTicket(evt, ui) {
if (ui.newState == true) {
$("#return").igDateEditor("option", "disabled", true);
$("#returnTime").igDateEditor("option", "disabled", true);
}
else {
$("#return").igDateEditor("option", "disabled", false);
$("#returnTime").igDateEditor("option", "disabled", false);
}
}
</script>
</body>
</html>
using IgniteUI.SamplesBrowser.Models.DataAnnotations;
using IgniteUI.SamplesBrowser.Models.Northwind;
using IgniteUI.SamplesBrowser.Models.Repositories;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace IgniteUI.SamplesBrowser.Controllers
{
public class EditorsController : Controller
{
//
// GET: /Editors/
[ActionName("data-annotation-validation")]
public ActionResult DataAnnotationValidation()
{
ValidatedOrder model = new ValidatedOrder();
ViewData["message"] = String.Empty;
model.ShipMethodList = this.GetShipMethods();
return View("data-annotation-validation", model);
}
[HttpPost]
[ActionName("data-annotation-validation")]
public ActionResult DataAnnotationValidation(ValidatedOrder model)
{
if (ModelState.IsValid)
{
ViewData["message"] = "Product saved successfully";
}
model.ShipMethodList = this.GetShipMethods();
return View("data-annotation-validation", model);
}
[ActionName("load-and-save-form-values")]
public ActionResult EditProduct()
{
Product product = RepositoryFactory.GetProductRepository().Get().First();
ViewData["message"] = String.Empty;
return View("load-and-save-form-values", product);
}
[ActionName("text-editor-mvc")]
public ActionResult TextEditor()
{
return View();
}
[ActionName("date-editor-mvc")]
public ActionResult DateEditor()
{
return View();
}
[ActionName("numeric-editor-mvc")]
public ActionResult NumericEditor()
{
return View();
}
[ActionName("mask-editor-mvc")]
public ActionResult MaskEditor()
{
return View();
}
public List<SelectListItem> GetShipMethods()
{
List<SelectListItem> selectList = new List<SelectListItem>()
{
new SelectListItem { Text = "Standard", Value = "Standard" },
new SelectListItem { Text = "One Day", Value = "OneDay" },
new SelectListItem { Text = "Two Day", Value = "TwoDay" },
new SelectListItem { Text = "International", Value = "International" }
};
return selectList;
}
}
}