[RESOLVED]HTML Helper for JQuery DatePicker using ViewModel

Given:

A View Model with a datetime field.

Wanted:

An HTML Helper that would point to the View Model field, and bring in all JQuery script to diplay a datepicker, binging the control name to the view model field.

Question…

This requires putting JQuery script into HTML Helper but I don’t know if that script would be executed… Haven’t created any helpers with Javascript or Jquery yet….

Format would look something like this in the view:

@model MyViewModel
@Html.JqueryDatePicker(p=>p.VMDateField,  ??? , new {})

Just wondering your thoughts on this?  Is it do-able (before I get started)….  Is it wise to use helpers with JQuery and JScript?  It sounds perfect for separation of concerns and plug-in part development.

 

a more typical approach would be to use unobtrusive attributes. 

   <input type="text" data-format="date" name="foo" />

and in the site init script:

$(function() {
   $(‘input[data-form=date]‘).datepicker();
}):

also you might use type="date" and pollyfill approach to date picker.

 

  

1. Helper should return markup for textbox, date picker icon and data-attributes to the textbox.

2. JQuery and your custom script should be available the page where you are placing the this helper.

3. Custom script should have functionality to attaching datepicker  to the textbox. needs to be trigger on page load and ajaxcomplete (if datefiled being rendered from ajax)

4. Custom script uses the data-attributes like data-format, type, data-maxdt to attach the datepicker with settings 

 

We actually did a open source project providing Html Helpers for JQuery UI DatePicker and other controls. You can download and use our library or take look at the code. Here is a link to a blog I wrote on this. The blog contains the github details

MVC DatePicker the easiest Way

Leave a Reply