jQuery-克隆的日期选择器日历未显示在日期选择器字段旁边

jQuery - Cloned datepicker calendar not appearing next to datepicker field

本文关键字:日期 选择器 字段 显示 日历 jQuery-      更新时间:2024-03-04

我已经创建了一个克隆的日期选择器元素(在@Aamir Afridi的帮助下),现在我正在尝试让日历显示克隆的日期选取器字段。

我在这里创建了一个jsfiddle来说明这个问题:http://jsfiddle.net/dalepotter/xTvfx/3/

日历显示了与页面一起加载的元素的字段,但对于克隆的字段,它的位置不正确——有人知道如何解决这个问题吗?

非常感谢你能提供的任何帮助。。。

这是代码:

HTML

    <h2>Action points</h2>
<table width="100%">
<tr><td width="50%" valign="top">
    <h3>For the Associate</h3>

    <div class="clone_Associate">
        <table width="300" style="background-color:#EBEBEB; margin: 0 0 30px 0; padding: 5px;">

        <tr><td class="associate_column_left">
            Date set:</td><td class="associate_column_middle">
            <input type="text" name="DATE_SET[]" class="datepick" value="04/12/2013">
        </td></tr>

        <tr><td class="associate_column_left">
            Date due for completion:</td><td class="associate_column_middle">
            <input type="text" name="DATE_DUE[]" class="datepick" value="">
        </td></tr>


        </table>
        <!-- End clone_Associate -->
        </div>
            <div class="placer_Associate"></div>
    <p><a href="#" class="clone_trigger_Associate">Add another action step for the Associate</a> &nbsp; </p>

</td><td width="50%" valign="top">

   <h3>For us</h3>

    <div class="clone_upReach">
        <table width="300" style="background-color:#EBEBEB; margin: 0 0 30px 0; padding: 5px;">

        <tr><td class="associate_column_left">
            Date set:</td><td class="associate_column_middle">
            <input type="text" name="DATE_SET[]" class="datepick" value="04/12/2013">
        </td></tr>

        <tr><td class="associate_column_left">
            Date due for completion:</td><td class="associate_column_middle">
            <input type="text" name="DATE_DUE[]" class="datepick" value="">
        </td></tr>



        </table>
        <!-- End clone_upReach -->
        </div>
    <div class="placer_upReach"></div>
    <p><a href="#" class="clone_trigger_upReach">Add another action step for upReach</a> &nbsp; </p>
</td></tr> 
</table>
            <link rel="stylesheet" type="text/css" href="http://brenda.upreach.org.uk/plugins/jquery.datepick.package-4.1.0/redmond.datepick.css">
                <script type="text/javascript" src="http://brenda.upreach.org.uk/plugins/jquery.datepick.package-4.1.0/jquery.datepick.js">  </script>

jQuery

$('.datepick').datepick({ 
            dateFormat: 'dd/mm/yyyy', showTrigger: '#calImg'});

        // Start code for duplicating a div box
        $(document).ready(function(){
            // Set datepicker options
            var options = {dateFormat: 'dd/mm/yy'}
          $(".clone_trigger_Associate").click(function () {
              // Prevent default link action
              event.preventDefault();
              $('input.cl:last').val('');
              var $newInput = $('.clone_Associate:last').clone(true).removeAttr('id');
              $(this).before($newInput);
              // Calculate correct number for the checkbox array
              var total = $('[name^="UPDATE_METHOD"]').length;
              var index = Math.round(total / 2) - 1;
              $('.clone_Associate').last().find("input[type='checkbox']").prop("name","UPDATE_METHOD["+index+"][]");
              // Reinitialise the datepicker
              $newInput.datepicker('destroy').datepicker(options);
            });
        });

        $(document).ready(function(){
            // Set datepicker options
            var options = {dateFormat: 'dd/mm/yy', showTrigger: '#calImg'}
            $(".clone_trigger_upReach").click(function () {
                // Prevent default link action
                event.preventDefault();
                $('input.cl:last').val('');
                var $newInput = $('.clone_upReach:last').clone(true).removeAttr('id');
                $(this).before($newInput);
                // Reinitialise the datepicker
                $newInput.datepicker('destroy').datepicker(options);
            });
        });
        // End code for duplicating a div box

您有两个问题:

  1. 打字错误-.datepicker()而不是.datepick()
  2. $newInput.datepicker('destroy').datepicker(options);

应该是

$newInput.find('.datepick').datepick('destroy').datepick(options);

因为您应该将日期选择器附加到输入,而不是克隆的div。

http://jsfiddle.net/xTvfx/4/