How do I stop the datepicker from displaying by default if no date is entered

Question

I am using jquery-ui-1.10.4.js and ASP MVC. In my View I am accepting an optional 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?

Answer 1

I do not think this is the best answer, but I found I could do this by disabling the datepicker initially, and then enabling it once it has been clicked on;

$(document).ready(function () {
    initialiseEdit();
});

var initialiseEdit = function () {

    // Disable the datepicker to ensure the datepicker is not shown when the page is loaded
    $('#Assessment_SsipAccreditationDate').datepicker("disable");

    // Class to stop the control from looking disabled
    $('#Assessment_SsipAccreditationDate').addClass('inputBox');
};

// This code is to make the datepicker function as though it is enabled, whether it is or not.
$('.clickEnable').click(function () {
    $('#Assessment_SsipAccreditationDate').datepicker("enable");
    $('#Assessment_SsipAccreditationDate').datepicker("show");
});

Because '#Assessment_SsipAccreditationDate' is disabled, I had to wrap it with a span containing the clickEnable class and put the click event on that.

Answer 2

You can disable it by using defaultDate attribute.

$(".datePicker").datepicker({
        defaultDate: ''
})