jonthornton / Datepair.js

A javascript plugin for intelligently selecting date and time ranges, inspired by Google Calendar.
https://www.jonthornton.com/Datepair.js
358 stars 87 forks source link

Form won't submit using datepair, jquery #92

Closed rogerskk closed 7 years ago

rogerskk commented 7 years ago

I am using Asp.Net MVC 5 and implemented datepair. The dropdown's work fine for selecting the date and times, but when I click my submit button, the form doesn't post. I put a break in my code that should fire when the button is clicked and it never gets there. Any ideas what I should check? Here is my relevant code:

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Edit Event Date</h4>
        <hr />

        <div class="form-group">
            <div class="col-md-2">Date and time of event:</div>
            <div id="datepair" class="col-md-10">

                @Html.HiddenFor(model => model.sEvent_Id)
                @Html.TextBoxFor(model => model.eventDate, "{0:MM/dd/yyyy}", new { @class = "date start" })
                @Html.ValidationMessageFor(model => model.eventDate, "", new { @class = "text-danger" })

                @Html.TextBoxFor(model => model.startTime, "{0:hh:mm tt}", new { @class = "time start" })
                to
                @Html.TextBoxFor(model => model.endTime, "{0:hh:mm tt}",  new { @class = "time end" })

                @Html.HiddenFor(model => model.sEvent_Id)
                @Html.TextBoxFor(model => model.endDate, "{0:MM/dd/yyyy}",  new { @class = "date end" })

            </div>
        </div>
<div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />

            </div>
        </div>
    </div>
}
<script type="text/javascript">
    $(function () { // will trigger when the document is ready
        var startDateTextBox = $('#eventDate');
        var endDateTextBox = $('#endDate');
        var startTimeTextBox = $('#startTime');
        var endTimeTextBox = $('#endTime');
        // initialize input widgets first
        $('#datepair .time').timepicker({
            'showDuration': true,
            'timeFormat': 'g:ia'
        });

        $('#datepair .date').datepicker({
            'format': 'MM/dd/yyyy',
            'autoclose': true
        });

        // initialize datepair
        $('#datepair').datepair({
            parseDate: function (el) {
                var utc = new Date($(el).datepicker('getDate'));
                return utc && new Date(utc.getTime() + (utc.getTimezoneOffset() * 60000));
            },
            updateDate: function (el, v) {
                $(el).datepicker('setDate', new Date(v.getTime() - (v.getTimezoneOffset() * 60000)));
            }
        });

    });
</script>
rogerskk commented 7 years ago

I was able to resolve by putting the following in the top of my view: HtmlHelper.ClientValidationEnabled = false;