Question

在我们的网站中，我们将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代码正在影响此页面上2000行代码中的DateRangePicker的每个实例。最后一点信息， closest_descendent 来自this堆栈溢出问题中的公认答案；但是，我怀疑这是否相关。真的很难住这里。图片如下：

编辑：此外，删除有问题的代码并不能不能解决问题。

编辑：

<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>

带有daterangepicker的jQuery .each（）使我所有的daterangepickers都中断了

0 个答案: