Solved

How to use datepicker with dynamic table

Posted on 2013-01-29
2
393 Views
Last Modified: 2013-01-29
I am trying to use jQuery datepicker with a dynamic table. The problem I am having is that the date picker keep changing the date in the first row. The codes I am currently using is as follows:-

<script>
$( document ).ready(function() {

  $(function()

        {
            $(".datepicker").datepicker({dateFormat: "dd M yy", changeMonth: true, changeYear: true,Anim:"Clip"});

            $(".datepicker").attr('readOnly', 'true');

        }
    );

    $(".button").click(function() {

                var $currentrow= $(this).closest('tr');
                $(".datepicker").datepicker("destroy")
                var $newrow=$currentrow.clone(true);
                $newrow.find('input:text').val('');
                $newrow.find(".datepicker").datepicker({dateFormat: "dd M yy", changeMonth: true, changeYear: true,Anim:"Clip"});
                $newrow.appendTo('tbody');

            })

        });

</script>

Open in new window


So what do I need to do to insert the date into the new row.

Thanks
0
Comment
Question by:Sheils
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 38830800
Test page : http://jsfiddle.net/F5cPx/
$( document ).ready(function() {
    $(".datepicker").datepicker({dateFormat: "dd M yy", changeMonth: true, changeYear: true,Anim:"Clip"});
    $("table").on("click", ".button", function() {
        var $newrow = $(this).closest('tr').clone().appendTo('table');
        var id = "dp"+new Date().getTime();
        $newrow.find('.datepicker').attr({"id":id}).val("").removeClass("hasDatepicker");
        $("#" + id).datepicker({dateFormat: "dd M yy", changeMonth: true, changeYear: true,Anim:"Clip"});
    })
});

Open in new window

0
 
LVL 16

Author Closing Comment

by:Sheils
ID: 38834190
Thanks Mate
0

Featured Post

[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There is basically two types of AJAX request in mootools. Request  and Request.HTML Request: Request is the basic XHR request class in MooTools. While not extremely useful on its own, it provides the basic functionality for both Request.HTM…
This article discusses how to implement server side field validation and display customized error messages to the client.
In this video, viewers will be given step by step instructions on adjusting mouse, pointer and cursor visibility in Microsoft Windows 10. The video seeks to educate those who are struggling with the new Windows 10 Graphical User Interface. Change Cu…
Monitoring a network: why having a policy is the best policy? Michael Kulchisky, MCSE, MCSA, MCP, VTSP, VSP, CCSP outlines the enormous benefits of having a policy-based approach when monitoring medium and large networks. Software utilized in this v…

635 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question