Solved

How to use datepicker with dynamic table

Posted on 2013-01-29
2
391 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
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Although Jacob Bernoulli (1654-1705) has been credited as the creator of "Binomial Distribution Table", Gottfried Leibniz (1646-1716) did his dissertation on the subject in 1666; Leibniz you may recall is the co-inventor of "Calculus" and beat Isaac…

820 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