In My view I have 4 EditorFor fields which I want to make as DatePickers

<div class="editor-field">
            @Html.EditorFor(model => model.Date1)            
</div>  

<div class="editor-field">
            @Html.EditorFor(model => model.Date2)            
</div>  
<div class="editor-field">
            @Html.EditorFor(model => model.Date3)            
</div>   
<div class="editor-field">
            @Html.EditorFor(model => model.Date4)            
</div>    

I have implemeted EditorFor Template like this

@model System.DateTime?

<link rel="stylesheet" href="~/Scripts/jquery-ui.css" />
<script language="Javascript" type="text/javascript" src="~/Scripts/jquery-1.9.1.js"></script>
<script language="Javascript" type="text/javascript" src="~/Scripts/jquery-ui.js"></script>

<div class="editor-field">
    @Html.TextBox("", String.Format("{0:MM/dd/yyyy}",(Model == DateTime.MinValue)? null : Model), new { @class="text"})
</div>

<script type="text/javascript">
    jQuery(document).ready(function ($) {        
        $("#@ViewData.ModelMetadata.PropertyName").datepicker({            
            changeMonth: true,
            changeYear: true,
            dateFormat: 'yy/mm/dd',
            gotoCurrent: true,
            pickTime: false
        });      
    });

</script>

But when DatePickers only works for the first EditorFor Control which is

<div class="editor-field">
            @Html.EditorFor(model => model.Date1)            
</div>

and it does not work for the rest of the three Could you please any one tell me how to get date pickers for rest of the three EditorFor controls, Thanks

Related posts

Recent Viewed