I want to custom edit filed for KENDO UI grid with date.
I created grid like this:
#(Html.Kendo().Grid<TT.TT.Web.Models.ViewModel.WorkViewModel>()
.Name("gridAdd")
.Columns(columns =>
{
columns.Bound(work =>
work.Date).EditorTemplateName("WorkDate");
})
)
Editor template look like this:
#model DateTime?
#(Html.Kendo().DatePicker()
.Name("WorkDate")
.Value(Model == null ? DateTime.Now.Date : #Model).Format("dd.MM.yyyy")
)
And in TT.TT.Web.Models.ViewModel.WorkViewModel have this property:
[Display(Name = "Datum")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd.MM.yyyy}")]
public DateTime Date { get; set; }
Everythink works, but when I click to edit date column, the value is always empty. I need to set default value due to value in non edit mode. Thanks!
When i look to DateTime modeli in editor:
#model DateTime?
#Html.Raw(#Model)
The value is always: 01.01.0001 0:00:00 and it should be 11.07.1990
Related
I was create a page has Datepicker with dd/MM/yyyy format with culture ar-SA but when I try to set the date it's always returns invalid date here is the datepicker
#(Html.Kendo().DatePickerFor(model => model.ReviewDate)
.Name("ReviewDate")
.Format("dd/MM/yyyy")
)
The validation is always failed on form submit in some system. I have set culture to my JS document ready to kendo.culture("en-GB");
My Model is:
[DataType(DataType.Date)]
[DataMember(Name = "ReviewDate")]
[AllowHtml]
[DisplayName("Review Date")]
[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
public DateTime ReviewDate { get; set; }
You need to set the culture and update the validator to satisfy the client-side validation
$(document).ready(function () {
kendo.culture("en-GB");
$.validator.addMethod('date',
function (value, element) {
return this.optional(element) || kendo.parseDate(value)
});
});
Also set your server culture too so it's the same by adding the following to your web.config under <system.web>
<globalization uiCulture="en-GB" culture="en-GB" enableClientBasedCulture="true" ></globalization>
I've used en-GB but you can swap that out for other cultures e.g. ar-SA if you want to use that instead
In a MVC 3 Razor Project, I have defined DisplayFormat in ViewModel to format a DateTime Property
[DisplayFormat(DataFormatString = "{0:dd-MMM-yyyy}", ApplyFormatInEditMode = true)]
[Display(Name = "Posted Date")]
public DateTime PostedDate { get; set; }
And I need to make the field Read Only in View
#Html.TextBoxFor(model => model.PostedDate, new { #readonly = "readonly" })
But when displaying the date in TextBoxFor it does not apply the DisplayFormat. If I Change TextBoxFor to a EditorFor DisplayFormat is applied but can not apply the readonly CSS property.
How to apply the date formatting & make the text box readonly?
you can still use editor for when the editor for renders I believe based on your case it should still render to the text-box after it renders you can use a simple jquery function to add an attribute read-only to the rendered text-box
$("#PostedDate").attr("readonly", "readonly");
not sure if it the best solution but you can try it
I am new to mvc3 and i am using c# coding and razor my view engine. Is there any way to use date picker with out using jquery and something else.
If you don't use javascript and jquery, well, you are left with HTML. And you know that in HTML you have standard input fields such as <input type="text">. Using pure HTML you cannot make a dynamic datepicker show when the user clicks on some date input.
Well, if you want to avoid "all scripting languages" I suppose you should have three dropdowns,
Months (1 - 12)
Days (1 - 31)
Years
Your Model would need to take three seperate fields for Month, Day and Year. Then in your controller action you will need to do some Date parsing to make sure it is a valid date and if not, add a ModelState Exception.
Since MVC comes with jQuery (and the validators are very helpful), why are you trying to avoid using them?
All of it COULD be done with jQuery or even plain JavaScript so you're really limiting yourself.
EDIT - Adding code sample
Your Model
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
public class DatePickerViewModel
{
[Required]
[DisplayName("Month")]
[Range(1,12,ErrorMessage = "Month must be between 1 and 12")]
public int? Date_Month {get;set;}
[Required]
[DisplayName("Day")]
[Range(1,31,ErrorMessage = "Day must be between 1 and 31")]
public int? Date_Day {get;set;}
[Required]
[DisplayName("Day")]
[Range(1900,2012,ErrorMessage = "Year must be between 1900 and 2012")]
public int? Date_Year {get;set;}
}
Your controller
public class DatePickerController : Controller
{
[HttpGet]
public ActionResult Choose()
{
return View(new DatePickerViewModel());
}
[HttpPost]
public ActionResult Choose(DatePickerViewModel model)
{
if(!ModelState.IsValid)
return View(model);
else
{
DateTime date;
if(!DateTime.TryParse(String.Format("{0}/{1}/{2}",model.Date_Month, model.Date_Day, model.Date_Year),out dt))
{
ModelState.AddModelError("","Invalid Date");
return View(model);
}
//Do something with the variable "date"
return View("SomeOtherView");
}
}
}
And your view
#model DatePickerViewModel
#using(Html.BeginForm())
{
<div>
<div>#Html.LabelFor(m => m.Date_Month) #Html.ValidationMessageFor( m => m.Date_Month)</div>
<div>#Html.DropDownListFor(m => m.Date_Month, (from n in Enumerable.Range(0, 12) select new SelectListItem{ Text = n==0? "":n.ToString(),Value = n ==0? "":n.ToString()})</div>
</div>
<div>
<div>#Html.LabelFor(m => m.Date_Day) #Html.ValidationMessageFor( m => m.Date_Day)</div>
<div>#Html.DropDownListFor(m => m.Date_Day, (from n in Enumerable.Range(0, 31) select new SelectListItem{ Text = n==0? "":n.ToString(),Value = n ==0? "":n.ToString()})</div>
</div>
<div>
<div>#Html.LabelFor(m => m.Date_Year) #Html.ValidationMessageFor( m => m.Date_Year)</div>
<div>#Html.DropDownListFor(m => m.Date_Year, (from n in Enumerable.Range(1899, 2012) select new SelectListItem{ Text = n==1899? "":n.ToString(),Value = n == 1899? "":n.ToString()})</div>
</div>
<div><input type="submit" value="Submit"/></div>
}
As you can see, the amound of raw code you need to create just to enable a date selector without using JavaScript at all is pretty large. Considering if you were to just use ANY jQuery date picker all you would need is a nullable DateTime property on your Model/ViewModel, a textbox on your view and a small snippet of JS to turn the text box in to a date selector.
Avoid re-inventing the wheel and reuse code that is already out there for how to use any jQuery Date Picker plugin.
I am currently trying to create a page which needs two date pickers in order to get the date time. I have to use another viewmodel to show person detail,so the system time model could not be used on the same page?
Is there anyont got idea about how to solve this problem?
cheers.
Add your 2 date time properties to your viewmodel.
public DateTime MyDate1{ get; set; }
public DateTime MyDate2{ get; set; }
In your view add a class to your input fields
#Html.TextBoxFor(m => m.MyDate1, new{ Class = "datepicker" })
#Html.TextBoxFor(m => m.MyDate2, new{ Class = "datepicker" })
Use JQuery's date picker. http://jqueryui.com/demos/datepicker/
<script>
$(function() {
$( ".datepicker" ).datepicker();
});
</script>
Below is the Property in my viewModel of Datetime,I want to display only date on the View,
Can any one help me out in formatting this. right Now Im seeing 01/01/2010 12:00:00 AM
public DateTime ModifiedDate
{
get
{
return Region.ModifiedDate;
}
set
{
Region.ModifiedDate = value;
}
}
#Html.TextBoxFor(model => model.ModifiedDate)
Model
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:MM/dd/yyy}" )]
public DateTime RecipeDate{ get; set; }
Edit Template
#model DateTime
#Html.TextBox("", string.Format(ViewData.TemplateInfo.FormattedModelValue.ToString(), Model), new { #class = "date" })
EditorFor doesn't allow for custom attributes, you must use a TextBox or TextBoxFor
I created an editor template (located in the Shared\EditorTemplates folder in my solution) that looks like this:
#model System.DateTime?
#Html.TextBox("", Model.HasValue ? Model.Value.ToString("MM/dd/yyyy") : string.Empty, new { #class = "date"})
And then when I want to use it,
#Html.EditorFor(model => model.RecipeDate, new { #class = "date" })
#Html.ValidationMessageFor(model => model.RecipeDate)
Seems to work pretty well for me.