JQuery .each () с daterangepicker оставил ВСЕ мои средства выбора даты - PullRequest
Новая
       20

JQuery .each () с daterangepicker оставил ВСЕ мои средства выбора даты

0 голосов
/ 28 февраля 2019

На нашем веб-сайте мы используем DateRangePicker для любых полей даты и времени.Я применил следующий код JQuery к сайту / сайту тестирования моей компании: 

<script type="text/javascript">
$(function() {
    $('input[name="other_company_start_date[]"]').each(function() {
        $(this).daterangepicker({
            autoUpdateInput: false,
            drops: 'up',
            singleDatePicker: true,
            showDropdowns: true,
            minYear: 2000,
            maxYear: 2030,
            locale: {
                cancelLabel: 'Clear'
            }
        });
    });
    $('input[name="other_company_start_date[]"]').each(function() {
        $(this).on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('YYYY-MM'));
            var endDate = $(this).parent().parent().parent().closest_descendent('input[name="other_company_end_date[]"]');
            var yearField = $(this).parent().parent().parent().closest_descendent('input[name="other_company_years[]"]');
            if (endDate.val() != '') {
                var startYear = new Date($(this).val());
                var endYear = new Date(endDate.val());
                yearField.val(Math.abs(startYear.getFullYear() - endYear.getFullYear()));
            }
        });
    });
    $('input[name="other_company_start_date[]"]').each(function() {
        $(this).on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
        });
    });
});
$(function() {
    $('input[name="other_company_end_date[]"]').each(function() {
        $(this).daterangepicker({
            autoUpdateInput: false,
            drops: 'up',
            singleDatePicker: true,
            showDropdowns: true,
            minYear: 2000,
            maxYear: 2030,
            locale: {
                cancelLabel: 'Clear'
            }
        });
    });
    $('input[name="other_company_end_date[]"]').each(function() {
        $(this).on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('YYYY-MM'));
            var startDate = $(this).parent().parent().parent().closest_descendent('input[name="other_company_start_date[]"]');
            var yearField = $(this).parent().parent().parent().closest_descendent('input[name="other_company_years[]"]');
            if (startDate.val() != '') {
                var startYear = new Date(startDate.val());
                var endYear = new Date($(this).val());
                yearField.val(Math.abs(startYear.getFullYear() - endYear.getFullYear()));
            }
        });
    });
    $('input[name="other_company_end_date[]"]').each(function() {
        $(this).on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
        });
    });
});
</script>

Div / входы определяются для каждой записи в базе данных, создавая еще одну строку полей ввода (показано ниже). 

<div style="border-radius: 5px; border-style: ridge; margin-left: 10px; margin-right: 10px;">
    <h3 style="padding-left: 30px;">Certifications:</h3>
    <div id="wrapper_two" style="width: 100%; display: table;">
    <?php
        $atleastonefield = false;
        foreach($certifications as $certification) {
            $atleastonefield = true;
            $certification = explode(":",$certification);
            echo '<div style="display: table-row;">';
                echo '<label style="display: table-cell; padding: 0; padding-left: 5px; text-align: right; width: 170px;">Certification Name:</label>';
                echo '<input class="formatted" style="display: table-cell; padding: 0; text-align: center; height: 40px;" type="text" name="certification_name[]" value="'.(isset($certification[0]) ? $certification[0] : "").'">';
                echo '<label style="display: table-cell; padding: 0; padding-left: 5px; text-align: right; width: 150px;">Certification Number:</label>';
                echo '<input class="formatted" style="display: table-cell; padding: 0; text-align: center; height: 40px;" type="text" name="certification_number[]" value="'.(isset($certification[1]) ? $certification[1] : "").'">';
            echo '</div>';
            echo '<div style="display: table-row;">';
                echo '<label style="display: table-cell; padding: 0; padding-left: 5px; text-align: right; width: 170px;">Company Acquired From:</label>';
                echo '<input class="formatted" style="display: table-cell; padding: 0; text-align: center; height: 40px;" type="text" name="certification_company[]" value="'.(isset($certification[2]) ? $certification[2] : "").'">';
                echo '<label style="display: table-cell; padding: 0; padding-left: 5px; text-align: right; width: 150px;">Date Obtained:</label>';
                echo '<input class="formatted" style="display: table-cell; padding: 0; text-align: center; height: 40px;" type="text" name="certification_obtained[]" value="'.(isset($certification[3]) ? $certification[3] : "").'">';
                echo '<label style="display: table-cell; padding: 0; padding-left: 5px; text-align: right; width: 60px;">Expiration:</label>';
                echo '<input class="formatted" style="display: table-cell; padding: 0; text-align: center; height: 40px;" type="text" name="certification_expiration[]" value="'.(isset($certification[4]) ? $certification[4] : "").'">';
            echo '</div>';
        }
    ?>
</div>

Проблема в том, что при загрузке страницы, если поле, в котором используется DateRangePicker, не пусто, тогда DateRangePicker отображается с NaN в качестве параметров дня с январским месяцем и годом minYear.Если поле не было пустым, оно отображает DateRangePicker правильно даже после нажатия или ввода даты вручную.

Если вы заметили, что код JQuery предназначен для «других компаний / опыта работы»поля, но размещенный html / php код взят из полей «сертификации».Причиной этого является то, что код JQuery влияет на каждый экземпляр DateRangePicker в 2000-х строк кода на этой странице.Последний бит информации, closest_descendent , взят из принятого ответа в этом вопросе переполнения стека;Однако я сомневаюсь, что это связано.Действительно в тупик здесь.Картинки ниже:

input boxes broken DateRangePicker working DateRangePicker

РЕДАКТИРОВАТЬ: Дополнительно, удаление кода обидчика не исправляет проблему.

РЕДАКТИРОВАТЬ: 

<div style="border-radius: 5px; border-style: ridge; margin-left: 10px; margin-right: 10px;">
    <h3 style="padding-left: 30px;">Other Companies You've Worked:</h3>
    <div id="wrapper_three" style="width: 100%; display: table;">
    <?php
        $atleastonefield = false;
        $i = 0;
        foreach($other_companies_worked as $other_company_worked) {
            $atleastonefield = true;
            $other_company_worked = explode(":",$other_company_worked);
            echo '<div style="display: table-row;">';
                echo '<label style="display: table-cell; padding: 0; padding-left: 5px; text-align: right; width: 230px;">Company Name (Related Jobs):</label>';
                echo '<div class="autocomplete companies" style="min-width: 200px; max-width: 300px; display: table-cell; padding: 0; height: 40px;">';
                    echo '<input id="input_'.$i.'" class="formatted" type="text" name="other_company_name[]" value="'.(isset($other_company_worked[0]) ? $other_company_worked[0] : "" ).'" style="text-align: center;">';
                    $i++;
                echo '</div>';
                echo '<label style="display: table-cell; padding: 0; text-align: right; width: 100px;">Position Held:</label>';
                echo '<div class="autocomplete positions" style="min-width: 200px; max-width: 300px; display: table-cell; padding: 0; height: 40px;">';
                    echo '<input id="input_'.$i.'" class="formatted" type="text" name="other_company_position[]" value="'.(isset($other_company_worked[2]) ? $other_company_worked[2] : "" ).'" style="text-align: center;">';
                    $i++;
                echo '</div>';
                echo '<label style="display: table-cell; padding: 0; text-align: right; width: 100px;">Years Worked:</label>';
                echo '<div class="autocomplete years" style="width: 40px; display: table-cell; padding: 0; height: 40px;">';
                    echo '<input id="input_'.$i.'" class="formatted" type="text" name="other_company_years[]" value="'.(isset($other_company_worked[1]) ? $other_company_worked[1] : "" ).'" style="text-align: center;">';
                    $i++;
                echo '</div>';
            echo '</div>';
            echo '<div style="display: table-row;">';
                echo '<label style="display: table-cell; padding: 0; padding-left: 5px; text-align: right; width: 230px;">Start Date:</label>';
                echo '<div style="min-width: 200px; max-width: 300px; display: table-cell; padding: 0; height: 40px;">';
                    echo '<input id="input_'.$i.'" class="formatted" type="text" name="other_company_start_date[]" value="'.(isset($other_company_worked[3]) ? $other_company_worked[3] : "" ).'" style="text-align: center;">';
                    $i++;
                echo '</div>';
                echo '<label style="display: table-cell; padding: 0; text-align: right; width: 100px;">End Date:</label>';
                echo '<div style="min-width: 200px; max-width: 300px; display: table-cell; padding: 0; height: 40px;">';
                    echo '<input id="input_'.$i.'" class="formatted" type="text" name="other_company_end_date[]" value="'.(isset($other_company_worked[4]) ? $other_company_worked[4] : "" ).'" style="text-align: center;">';
                    $i++;
                echo '</div>';
            echo '</div>';
        }
    ?>
</div>
...