jQuery - клонированный календарь DatePicker не отображается рядом с полем DatePicker

0

Я создал клонированный элемент datepicker (с помощью @Aamir Afridi), и теперь я пытаюсь создать календарь с клонированным полем datepicker.

Я создал здесь 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
Теги:
datepicker

1 ответ

1
Лучший ответ

У вас было две проблемы:

  1. typo - .datepicker() вместо .datepick()
  2. $newInput.datepicker('destroy').datepicker(options);

должно быть

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

потому что вы должны присоединить datepicker к входам, а не к клонированному div.

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

  • 0
    Это прекрасно - спасибо за исправление :-)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню