1

I am having these two textboxes for start date and end date. On These two textboxes I use datepicker. Also I am having an uplodify on this page. When I fill the date on these textboxes and click on upload button to upload picture. I got the following error as "Missing Instance Data for this DateTimePicker"

Code for HTml:

   <div class="clearfix mrb10">
                        <div class="vp-dt-left">@Resources.Languages.Start<span class="orange">*</span>:</div>
                        <div class="vp-dt-right">
                            @Html.TextBoxFor(m => m.StartDate, "{0:d}", new { @class = "vp-box-input-125 SelectDate requiredField", @readonly = "readonly", @Style = "width:72px!important;" })
                        </div>
                    </div>
                    <div class="clearfix">
                        <div class="vp-dt-left">@Resources.Languages.End<span class="orange">*</span>:</div>
                        <div class="vp-dt-right">
                            @Html.TextBoxFor(m => m.EndDate, "{0:d}", new { @class = "vp-box-input-125 SelectDate requiredField", @readonly = "readonly", @Style = "width:72px!important;" })
                        </div>
                    </div>

Jquery Code:

$('.SelectDate').datepicker({
            });

Script File:

Please help me to solve this problem. Thanks.

Toby Allen
  • 10,997
  • 11
  • 73
  • 124
Nikhil Vasdev
  • 183
  • 1
  • 3
  • 14

1 Answers1

0

I have done the same in my code using jquery datepicker. Hope it will help you :-

@Html.TextBoxFor(m => m.FromDate, new { style = "width: 200px;" })
@Html.TextBoxFor(m => m.ToDate, new { style = "width: 200px;" })


<script type="text/javascript">
  $(document).ready(function () {
    $("#ToDate").datepicker(
     {
         beforeShow: function (input, inst) {
             inst.dpDiv.css({ marginTop: -input.offsetHeight + 'px', marginLeft: input.offsetWidth + 'px' });
         },
         changeYear: true,
         yearRange: '-2:' + new Date().getFullYear(),
         onClose: function (selectedDate) {
             $("#FromDate").datepicker("option", "maxDate", selectedDate);
         },
     });
    $("#FromDate").datepicker(
    {
        beforeShow: function (input, inst) {
            inst.dpDiv.css({ marginTop: -input.offsetHeight + 'px', marginLeft: input.offsetWidth + 'px' });
        },
        changeYear: true,
        yearRange: '-2:' + new Date().getFullYear(),
        onClose: function (selectedDate) {
            $("#ToDate").datepicker("option", "minDate", selectedDate);
        }
    });
});

monu
  • 370
  • 1
  • 10