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
Related
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
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.
When I edit my one of the form sin ASP.NET MVC 3 in this when I edit a user registration form then I got date in startdate is 21-Mar-12 12:00:00 AM in text box but I need 21-Mar-12.
So how can I format textbox date like that?
You could decorate the DateTime property on your view model with the [DisplayFormat] attribute which allows you to specify a given format:
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd-MMM-yy}")]
public DateTime SomeDate { get; set; }
and in your strongly typed view use the EditorFor helper to render the corresponding input field:
#Html.EditorFor(x => x.SomeDate)
As far as binding the value back to a DateTime field when posting back is concerned you could write a custom model binder that will use this format. I have shown an example here.
i'm trying to put DropDownList validation to work.
in model:
[Required(ErrorMessage = "this field is required")]
public int ObjectTypeID { get; set; }
in view:
<div class="editor-field">
#Html.DropDownList("ObjectTypeID", string.Empty)
#Html.ValidationMessageFor(model => model.ObjectTypeID)
</div>
if the user leaves the selection empty i expect client side validation to alarm. but this does not happen.
what can be done?
The behavior of system types is that they must have a value when initalized. An integer has a value of "0". Change your model to accept a nullable int:
public int? ObjectTypeID { get; set; }
Just wondering, but why not use DropDownListFor?
For client side validation to work I think you need to turn on ClientValidationEnabled & UnobtrusiveJavaScriptEnabled in the web.config for your project, I believe you also need to reference the jquery.validate.unobtrusive.min.js script on your page?
1) You are not loading your dropdownlist
2) Use DropDownListFor in order to match validation with ddl