1

I have added Bootstrap 3 eonasdan-datetimepicker. When I Select Datetimepicker it gives focus to that particular Datetimepicker and when i click on submit button, Submit button prevents submitting form and opens datetimepicker-dialog as if it becomes part of datetimepicker

My ViewModel: 

[Display(Name = "From")]
[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
public DateTime From { get; set; }

[Display(Name = "To")]
[DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}", ApplyFormatInEditMode = true)]
public DateTime To { get; set; }

And View Is:

<div class="form-group">
    @Html.LabelFor(model => model.From, htmlAttributes: new { @class = "control-label col-lg-4 col-md-4" })
    <div class="col-lg-6 col-md-6">
        @Html.TextBoxFor(model => model.From, new { @class = "form-control datetime"})
        @Html.ValidationMessageFor(model => model.From, "", new { @class = "text-danger" })
    </div>
</div>
<div class="form-group">
    @Html.LabelFor(model => model.To, htmlAttributes: new { @class = "control-label col-lg-4 col-md-4" })
    <div class="col-lg-6 col-md-6">
         @Html.TextBoxFor(model => model.To, new { @class = "form-control datetime" })
         @Html.ValidationMessageFor(model => model.To, "", new { @class = "text-danger" })
    </div>
</div>

@section Styles{
    @Styles.Render("~/Content/jqueryui")
    @Styles.Render("~/Content/datetimepicker")
}

@section Scripts{
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/jqueryui") 
    @Scripts.Render("~/bundles/datetimepicker") 
    <script type="text/javascript">
        $(function () {
            //setting datetime picker.
            $('#From').datetimepicker({ format: 'DD/MM/YYYY'});
            $('#To').datetimepicker({
                useCurrent: false, //Important! See issue #1075
                format: 'DD/MM/YYYY'
            });
            $("#From").on("dp.change", function (e) {
                $('#To').data("DateTimePicker").minDate(e.date);
            });
            $("#To").on("dp.change", function (e) {
                $('#From').data("DateTimePicker").maxDate(e.date);
            });
        });
    </script>
}
William-H-M
  • 1,050
  • 1
  • 13
  • 19
Umair Anwaar
  • 1,130
  • 9
  • 27
  • You have included `jqueryval` - do you also have `@Html.ValidationMessageFor()` associated with those properties and is a message displayed when you submit? –  Mar 29 '17 at 06:21
  • @StephenMuecke No message when i submit and i associated the message for properties. – Umair Anwaar Mar 29 '17 at 06:25
  • Is this only occurring when you select a date where the day is greater than 12? –  Mar 29 '17 at 06:29
  • @StephenMuecke yes issue with when i select date Greater then 12 and i added format `[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]` in date properties but now i got error for date field is not in correct format – Umair Anwaar Mar 29 '17 at 08:06
  • Yes, That is because `jquery.validate.js` validates dates based on `MM/dd/yyyy` format. You need to reconfigure the `$.validator`. For an example, refer [this answer](http://stackoverflow.com/questions/27285458/jquery-ui-datepicker-and-mvc-view-model-type-datetime/27286969#27286969) - the solution in that is for `jquery-ui` date-picker, but I assume there is something similar for the datepicker plugin your using. –  Mar 29 '17 at 08:11
  • @StephenMuecke I try to add Jquery-ui-datetimepicker and its working fine. but when i use bootstrapo3 datetimepicker which is also use jqueiry-ui then throw format error. – Umair Anwaar Mar 29 '17 at 08:23
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/139337/discussion-between-stephen-muecke-and-umair-anwaar). –  Mar 29 '17 at 08:42

0 Answers0