Using JQuery datepicker with an ASP.NET MVC ViewModel

Question

Hello all,

I've been trying to use a JQuery datepicker (calendar) in my asp.bet mvc view. Everything was working ok until I had to use a ViewModel: since I preferred to use the hard-coded object graph (ie <input name="viewmodel.Meeting.Date"...) instead of using a model binder I'm stuck with a script that doesn't work- apparently the JQuery script doesn't allow dots in your script - $(#viewmodel.Meeting.Date)...

Any ideas?

Answer 1

Instead of using id as your selector you could add a class unique to your datepicker that could be used as your selector?

Answer 2

Yes, as Dan Elliott said use a class:

<%= Html.TextBox("#viewModel.Meeting.Date",value,new { @Class='someClassHere'}) %>

I would rethink the way your doing it though, it's a messy ID and I am not sure how that will work when/if you attempt to post the form as the model binder will attempt to find a key for it (i think).

Answer 3

Dan, Damien, Thanks a lot for the prompt reply! Since I'm new to JQuery, am not sure how can I make this work. What do I need to put in my class? Have you got any good tutorials you can refer me to? thanks :)

Answer 4

Here's an example implementation I use...

// In my view's javascript (JQuery)
$(function() {
        $('input').filter('.datePicker').datepicker({ showOn: 'button', buttonImage: '../../Content/Images/calendar.png', buttonImageOnly: true });
    });

// In my view...
<%= Html.TextBox("AppraisalDate", null, new { @class="datePicker" })%>

Now any textbox that I use the class "dataPicker" on will have it...

Answer 5

@RailRhoad - Many many thanks for that piece of code!! That's exactly what I was looking for! This also has made me realise that I needed to leave out all the dots from the input id attribute, what you've tried telling me but I didn't really get. Looking at the source code of my page I saw that the Html.TextBox method has rendered an input with an id similar to the name only the dots where replaced by underscores.

@Damien- I thought that by class I needed to add a css class :p

Thanks for all!