Question

我之前已经问过这个问题，但由于我的代码有点不同，我似乎无法获得以前的工作答案。

所以我有一个重复字段，我试图使用datepicker。第一个实例工作正常，但是如果我添加一行，则datepicker会显示在屏幕的另一部分上，并且在点击时不会在字段中输入任何信息。

这是我的代码：

<script>
jQuery(document).ready(function($) {
    $('.metabox_submit').click(function(e) {
        e.preventDefault();
        $('#publish').click();
    });
    $('#add-row').on('click', function() {
        var row = $('.empty-row.screen-reader-text').clone(true);
        row.removeClass('empty-row screen-reader-text');
        row.insertBefore('#repeatable-fieldset-one tbody>tr:last');
        return false;
    });
    $('.remove-row').on('click', function() {
        $(this).parents('tr').remove();
        return false;
    });
    $('#repeatable-fieldset-one tbody').sortable({
        opacity: 0.6,
        revert: true,
        cursor: 'move',
        handle: '.sort'
    });

    $('.session-time').timepicker({
        'minTime': '8:00am',
        'maxTime': '10:0pm',
        'step': 15,
    });

    $('.session-date').each(function() {
        $(this).datepicker({
        changeMonth: true,  
        changeYear: true,
        dateFormat: 'mm-dd-yy',
        yearRange: '2017:2020'
        });
    });
});
</script>

});
</script>
<div class="wrap">
<table id="repeatable-fieldset-one" class="form-table">
    <thead>
        <tr>
            <th>Remove</th>
            <th>Session Date</th>
            <th>Session Time</th>
            <th>Sort</th>
        </tr>
    </thead>
    <tbody>

    <?php
    if ( $repeatable_fields ) :
        foreach ( $repeatable_fields as $field ) : // there are complete fields
    ?>
        <tr>
            <td><a class="button remove-row" href="#">-</a></td>
            <td><input type="text" class="session-date" name="session_date[]" value="<?php if($field['session_date'] != '') echo esc_attr( $field['session_date'] ); ?>" /></td>
            <td><input type="text" class="session-time" name="session_time[]" value="<?php if($field['session_time'] != '') echo esc_attr( $field['session_time'] ); ?>" /></td>
            <td><a class="sort">|||</a></td>
        </tr>


    <?php endforeach; 
        else : // show a blank one ?>

        <tr>
            <td><a class="button remove-row" href="#">-</a></td>
            <td><input type="text" class="session-date" name="session_date[]" /></td>
            <td><input type="text" class="session-time" name="session_time[]" /></td>
            <td><a class="sort">|||</a></td>
        </tr>

    <?php endif; ?>
    <!-- empty hidden one for jQuery -->

        <tr class="empty-row screen-reader-text">
            <td><a class="button remove-row" href="#">-</a></td>
            <td><input type="text" class="session-date" name="session_date[]" /></td>
            <td><input type="text" class="session-time" name="session_time[]" /></td>
            <td><a class="sort">|||</a></td>
        </tr>
    </tbody>
</table>

<p><a id="add-row" class="button" href="#">Add another</a></p>
</div>

Answer 1

对于遇到此问题的任何其他人，以下是适用于我的修复程序。我能够为datapicker工作，但不能用于时间戳。

$(document).on('focus', '.session-date', function() {
    $(this).datepicker({
        changeMonth: true,  
        changeYear: true,
        dateFormat: 'mm-dd-yy',
        yearRange: '2017:2020
    });
});

只需使用代码代替

$('.session-date').each(function() {
    $(this).datepicker({
        changeMonth: true,  
        changeYear: true,
        dateFormat: 'mm-dd-yy',
        yearRange: '2017:2020'
    });
});

重复字段上的Jquery Datepicker

1 个答案: