javascript - daterangepicker - 将字段输入复制到另一个字段输入

Question

我正在尝试从日期范围选择器复制字段，如下所示:

<script type="text/javascript">
    $(function() {
        $('input[name="daterange"]').daterangepicker({
            autoUpdateInput: false,
            locale: {
                cancelLabel: 'Clear'
            },
            format: "DD/MM/YYYY",
            startDate: new Date(new Date().getTime() + 24 * 60 * 60 * 1000),
            endDate: new Date(new Date().getTime() + 24 * 60 * 60 * 1000),
            minDate: new Date(new Date().getTime() + 24 * 60 * 60 * 1000)
        });

        $('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format('DD/MM/YYYY'));
            $("#date_start").val(picker.startDate.format('DD/MM/YYYY'));
            $("#date_end").val(picker.endDate.format('DD/MM/YYYY'));
        });

        $('input[name="daterange"]').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
        });

    });
</script>

然后我有这些输入，第一个输入使用日期范围选择器来选择 2 个日期。接下来的 2 个输入本质上设置为使用 daterangepicker 选择的开始和结束日期，而后两个是我想要复制到的字段。

<div class="col-sm-6">
            <?= $this->Form->input('daterange', ['class'=>'form-control', 'type'=>'text']);?>
        </div>
<input type="text" name="date_start" id="date_start" value="" />
<input type="text" name="date_end" id="date_end" value="" />

<input type="text" name="date_start5" id="date_start5" value="" />
<input type="text" name="date_end5" id="date_end5" value="" />

我想要做的是将开始和结束日期输入复制到其他一些字段，但它们似乎不起作用。我尝试了两种不同的脚本，但均无济于事:

<script>
            $(function(){
                var $date_start = $('#date_start');
                var $date_start5 = $('#date_start5');
                function onChange() {
                    $date_start5.val($date_start.val());
                };
                $('#date_start')
                    .change(onChange)
                    .keyup(onChange);
            });
            </script>

<script type=text/javascript>
            $(function() {
              var dateStart = $('#date_start');
              dateStart.change(function() {
                $('#date_start5').val(dateStart.val());
              });
            });

在调试器中:

(function (alreadyInjectedPropertyName, responseEventId) {
    var scriptPluginsInitialized = !!(alreadyInjectedPropertyName in window);
    var event = new CustomEvent(responseEventId, { detail: scriptPluginsInitialized });
    window.dispatchEvent(event);
}).apply(this, JSON.parse(document['currentScript'].getAttribute('args')));

完整的 ctp 文件:

<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css" />
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

<script type="text/javascript">
    $(function() {
        $('input[name="daterange"]').daterangepicker({
            autoUpdateInput: false,
            locale: {
                cancelLabel: 'Clear'
            },
            format: "DD/MM/YYYY",
            startDate: new Date(new Date().getTime() + 24 * 60 * 60 * 1000),
            endDate: new Date(new Date().getTime() + 24 * 60 * 60 * 1000),
            minDate: new Date(new Date().getTime() + 24 * 60 * 60 * 1000)
        });

        $('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format('DD/MM/YYYY'));
            $("#date_start").val(picker.startDate.format('DD/MM/YYYY'));
            $("#date_end").val(picker.endDate.format('DD/MM/YYYY'));
        });

        $('input[name="daterange"]').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
        });

    });
</script>

<div class="container" style="margin-top: 70px;">
    <?= $this->Flash->render('auth') ?>
    <?php $this->Form->templates([
        'inputContainer' => '<div class="form-group">{{content}}</div>',
        'inputContainerError' => '<div class="error" style="color:red;">{{content}}{{error}}</div>'
    ]);?>
    <div class="col-sm-2">
    </div>
    <div class="col-sm-8">
        <div class="container col-sm-12" style="border-radius: 10px; border: 1px solid;" >
            <?= $this->Form->create() ?>

            <div class="col-sm-6">
                <?= $this->Form->input('daterange', ['class'=>'form-control', 'type'=>'text', 'label'=>'Session Dates',
                'placeholder'=>'Please select the start and end dates for your session.']);?>
            </div>

            <input type="text" name="date_start" id="date_start" value="" />
            <input type="text" name="date_end" id="date_end" value="" />

            <input type="text" name="date_start5" id="date_start5" value="" />
            <input type="text" name="date_end5" id="date_end5" value="" />

            <script>
            $(function(){
                var $date_start = $('#date_start');
                var $date_start5 = $('#date_start5');
                function onChange() {
                    $date_start5.val($date_start.val());
                };
                $('#date_start')
                    .change(onChange)
                    .keyup(onChange);
            });
            </script>

            <script>
            $(function(){
                var $date_end = $('#date_end');
                var $sessiondate_end = $('#date_end5');
                function onChange() {
                    $sessiondate_end.val($date_end.val());
                };
                $('#date_end')
                    .change(onChange)
                    .keyup(onChange);
            });
            </script>

            <script>
            $(function() {
              var dateEnd = $('#date_end');
              dateEnd.change(function() {
                $('#date_end5').val(dateEnd.val());
              });
            });
            </script>

            <script type=text/javascript>
            $(function() {
              var dateStart = $('#date_start');
              dateStart.change(function() {
                $('#date_start5').val(dateStart.val());
              });
            });
            </script>
            <?= $this->Form->end() ?>
          </div>
          </div>
          <div class="col-sm-2">
          </div>
          </div>

Answer 1

经过一些更改后，我可以使用此代码来实现它

<input type="text" name="date_start" id="date_start" value="" />
<input type="text" name="date_end" id="date_end" value="" />

<input type="text" name="date_start5" id="date_start5" value="" />
<input type="text" name="date_end5" id="date_end5" value="" />

JS:

$(function() {
    $('input[name="date_start"]').daterangepicker({
        autoUpdateInput: false,
        locale: {
            cancelLabel: 'Clear'
        },
        format: "DD/MM/YYYY",
        startDate: new Date(new Date().getTime() + 24 * 60 * 60 * 1000),
        endDate: new Date(new Date().getTime() + 24 * 60 * 60 * 1000),
        minDate: new Date(new Date().getTime() + 24 * 60 * 60 * 1000)
    });

    $('input[name="date_start"]').on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format('DD/MM/YYYY'));
        $("#date_start").val(picker.startDate.format('DD/MM/YYYY'));
        $("#date_end").val(picker.endDate.format('DD/MM/YYYY'));
        $("#date_start5").val(picker.startDate.format('DD/MM/YYYY'));
        $("#date_end5").val(picker.startDate.format('DD/MM/YYYY'));
    });

    $('input[name="date_start"]').on('cancel.daterangepicker', function(ev, picker) {
        $(this).val('');
    });

});

我刚刚在日期范围选择器的应用函数中添加了这两行

$("#date_start5").val(picker.startDate.format('DD/MM/YYYY'));
$("#date_end5").val(picker.startDate.format('DD/MM/YYYY'));

然后，更正输入名称(date_start 而不是 daterange)

$('input[name="date_start"]')

但是，您的导入似乎已过时，我不知道这是否是您想要的，但您应该采用最新版本的 JQuery 和 Daterangepicker。

顺便说一句，日历仅在您选择第一个输入(也称为开始日期)时才起作用。

发表评论后这是我更新的一些依赖项:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2.1.24/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2.1.24/daterangepicker.css" />