I am using jquery-ui-1.10.4.js and ASP MVC. In my View I am accepting a nullable date as input;

@Html . EditorFor ( model => model . Assessment . SsipAccreditationDate )

 

I have an Editor Template which injects the datepicker class;

 

@model DateTime ? @Html . TextBox ( "" , ( Model . HasValue ? Model . Value . ToLongDateString () : string . Empty ), new { @class = "datePicker" , @style = "width:200px;" })

 

I have jquery code to hook up the datepicker with the date field;

 

if ($(".datePicker").length) {    

      $(".datePicker").datepicker({ showOn: 'both', dateFormat: constantDateFormat, changeMonth: true, changeYear: true }) .next('button.ui-datepicker-trigger') .attr("tabIndex", "-1");

}

 

When the View is loaded, if this date field is empty the datepicker automatically displays. What I would prefer would be for the datepicker to only be displayed if the user clicks on it or the associated button. This is what the showOn: Both configuration is meant to acheive. Notice in the jquery the tab index is set to -1, so the reason for the datepicker showing cannot be to do with the field in focus. So how do I stop the datepicker showing when the View is loaded?