5450

How to use jQuery UI DatePicker and MVC 4 with custom format (dd.MM.yyyy)

Let's say you want to use the datepicker with the custom Romanian format: dd.MM.yyyy

How can you do this without encountering jquery validation problems and misinterpreting of the date time after a postback ?

Answer1:

First of all include datepicker-ro.js after jquery-ui.js.

After that set the format in the model like this:

public class ProductionCalculationReportModel { [DataType(DataType.Date), DisplayFormat(DataFormatString = "{0:dd.MM.yyyy}", ApplyFormatInEditMode = true)] public DateTime? BeginDate { get; set; } [DataType(DataType.Date), DisplayFormat(DataFormatString = "{0:dd.MM.yyyy}", ApplyFormatInEditMode = true)] public DateTime? EndDate { get; set; } }

Then, in .cshtml file you can put the textboxes:

@Html.TextBoxFor(x => x.BeginDate, "{0:dd.MM.yyyy}", new { @class = "datefield" }) @Html.TextBoxFor(x => x.EndDate, "{0:dd.MM.yyyy}", new { @class = "datefield" })

Then, also in the cshtml file, let's take care of the validation:

<script> $(function() { $("#BeginDate").datepicker({ defaultDate: "+1w", changeMonth: true, numberOfMonths: 3, onClose: function( selectedDate ) { $("#EndDate").datepicker( { minDate: selectedDate , dateFormat: 'dd.mm.yy' } //"option", "minDate", selectedDate ); } }); $("#EndDate").datepicker({ defaultDate: "+1w", changeMonth: true, numberOfMonths: 3, onClose: function( selectedDate ) { $("#BeginDate").datepicker( { maxDate: selectedDate , dateFormat: 'dd.mm.yy' } //"option", "maxDate", selectedDate ); } }); }); $(function () { $.validator.addMethod('date', function (value, element) { if (this.optional(element)) { return true; } var ok = true; try { $.datepicker.parseDate('dd.mm.yy', value); } catch (err) { ok = false; } return ok; }); }); </script>

After that create a model binder:

public class ProductionCalculationReportModelBinder : DefaultModelBinder { protected override object GetPropertyValue(ControllerContext controllerContext, ModelBindingContext bindingContext, System.ComponentModel.PropertyDescriptor propertyDescriptor, IModelBinder propertyBinder) { if (propertyDescriptor.ComponentType == typeof(PAS.Areas.Admin.Models.ProductionCalculationReportModel)) { if (propertyDescriptor.Name == "BeginDate") { var obj = bindingContext.ValueProvider.GetValue("BeginDate"); return DateTime.ParseExact(obj.AttemptedValue.ToString(), "dd.MM.yyyy", System.Globalization.CultureInfo.InvariantCulture); } if (propertyDescriptor.Name == "EndDate") { var obj = bindingContext.ValueProvider.GetValue("EndDate"); return DateTime.ParseExact(obj.AttemptedValue.ToString(), "dd.MM.yyyy", System.Globalization.CultureInfo.InvariantCulture); } } return base.GetPropertyValue(controllerContext, bindingContext, propertyDescriptor, propertyBinder); } }

Add it in Global.asax like this:

ModelBinders.Binders.Add(typeof(ProductionCalculationReportModel), new ProductionCalculationReportModelBinder());

And then use it like this:

[HttpPost] public ActionResult Index([ModelBinder(typeof(ProductionCalculationReportModelBinder))]ProductionCalculationReportModel model) {}

Recommend

  • Insert a TextBox and set the formula
  • How can I change the ForeColor of the GroupBox text without changing its children ForeColor?
  • How to Add new Row Dynamically in ASP.Net MVC 5
  • How to pass a value from TextBox as parameter to Action
  • Reusable MVC code: handling value types in linq expressions
  • Prevent timepicker addon from opening calendar
  • Use Hidden field in syncfusion column chart series
  • createRecord with ember-data + ember-data-django-rest-adapter
  • Using JQuery Datepicker To Only Show Months
  • How to use java.time.LocalDate on a Play Framework JSON Rest?
  • Year, Month, and Day parameters describe an un-representable DateTime in Persian calender
  • jQuery - how to validate a date of birth using jQuery Validation plugin?
  • Set Initial Value for Required attribute
  • A simple datepicker in VueJS
  • Model binder ValueProvider appends to the existing value + MVC 4
  • How to parsing NSDate to RFC 822 always use in English?
  • Recursion in ASP.NET Core Razor views
  • MVC extension method error
  • stop execution in Custom validator if it false
  • Custom WebViewPage inject code when razor template is rendering
  • Java: can you cast Class into a specific interface?
  • AES padding and writing the ciphertext to a disk file
  • Updating server-side rendering client-side
  • How to extract text from Word files using C#?
  • jquery mobile loadPage not working
  • Run Powershell script from inside other Powershell script with dynamic redirection to file
  • How to get icons for entities from eclipse?
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • coudnt use logback because of log4j
  • sending mail using smtp is too slow
  • JaxB to read class hierarchy
  • Busy indicator not showing up in wpf window [duplicate]
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • How can I use `wmic` in a Windows PE script?
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?