Juqeyr ui foucs

jquery ui calendar focus issue in dialog

by ravimallya

HTML

<div id="dialog-message" title="Schedule Appointment">
    <div class="text-center"> <span id="mandatory" class="required-error" style="display:none;font-size:14px;font-weight:bold;"></span>
    </div>
    <table class="table-add-form">
        <tr>
            <td class="no-wrap">Department <span class="required-error">*</span> 
            </td>
            <td>
              <select id="ddldepartment" class="form-control"><option value="0">Select...</option><option value="1" title="Anes">Anes</option><option value="1" title="Cardiology">Cardiology</option><option value="1" title="Dental">Dental</option><option value="1" title="Dept of Medicine">Dept of Medicine</option><option value="1" title="Dermatology">Dermatology</option></select>
            </td>
        </tr>
        <tr>
            <td class="no-wrap">Date From <span class="required-error">*</span> 
            </td>
            <td>
                <div class="input-group full-width date openDatepicker">
                    <input id="DateFrom" class="form-control boot-datepicker" />
                    <div class="input-group-addon"><i class="fa fa-calendar "></i>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td class="no-wrap">Date To</td>
            <td>
                <div class="input-group full-width date openDatepicker">
                    <input id="DateTo" class="form-control boot-datepicker" />
                    <div class="input-group-addon"><i class="fa fa-calendar "></i>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td class="no-wrap">Assignee <span class="required-error">*</span> 
            </td>
            <td>
                <input id="txtAssignee" type="text" class="form-control" />
            </td>
        </tr>
        <tr>
            <td class="no-wrap" style="white-space:nowrap;">Phone Number</td>
            <td>
                <input...

JavaScript

$(document).ready(function () {
    var dlg = $("#dialog-message").dialog({
        autoOpen: false,
        modal: true,
        draggable: false,
        resizable: false,
        minWidth: 500,
        open: function (event, ui) {
            $('#mandatory').hide();
            $('#mandatory').text("Please fill all the required fields!");
            $('#ddldepartment').get(0).selectedIndex = 0;
            $('#DateFrom').val("");
            $('#DateTo').val("");
            $('#txtAssignee').val("");
            $('#txtPhoneNumber').val("");
            $('.boot-datepicker').datepicker();
            $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButton');
        },
        buttons: [{
            text: "Save",
                "class": 'btn btn-primary',
            click: function () {
                // Save code here
                if ($("#ddldepartment option:selected").index() === 0) {
                    $('#mandatory').show();
                    return false;
                } else if ($('#DateFrom').val() === "") {
                    $('#mandatory').show();

                    return false;
                }
                //else if ($('#DateTo').val() === "") {
                //   $('#mandatory').show();
                //      return false;
                //  } 
                else if ($('#txtAssignee').val() === "") {
                    $('#mandatory').show();
                    return false;
                } else {
                    if (new Date($('#DateFrom').val()) > new Date($('#DateTo').val())) {
                        $('#mandatory').show();
                        $('#mandatory').text("'To Date' should be greater than 'From Date'");
                        return false;
                    } else {
                        $('#mandatory').hide();
                        var saveDt = new Date($('#DateFrom').val());
                        $('#ClickedDate').val(moment(saveDt).format('YYYY-MM-DD'));
...