display datepicker on dynamically created button

Question

i'm trying to show datepicker when user click on dynamically created button.i don't want to show text box there so i use hidden input.

Javascript:

        function showDate(){
        var dateDiv = $('#dateDiv');
        for(ind=0; ind<=5; ind++){
            var date = $('<img src="calendar.png" class="datepicker" id="'+ind+'-date" /><input type="hidden" id="'+ind+'-date-picker" /><br />');
            dateDiv.append(date);
        }
    }

    window.onload = function(){
        showDate();
        $('.datepicker').live('click', function(){
            var datepickerId =$(this).attr('id');
            datepickerId += '-picker';
            $('#'+datepickerId).datepicker();
        });
    }

but nothing happen when i click on calender icon.

HTML:

<body>
   <div id="dateDiv"></div>
</body>

score 1 · Accepted Answer · answered Apr 02 '13 at 14:06

1

.datepicker() just sets up a datepicker. You may do this already when you create the div, and not every time it is clicked.

To show it, you may call .datepicker('show');

answered Apr 02 '13 at 14:06

David Hedlund

128,221
31
203
222

there are dynamically created buttons.how can i set up datepicker for each hidden input field. @david – ARsl Apr 02 '13 at 15:08
You're setting them up alright, but I'd do it where they are created rather than where you want them to be shown. No biggie; the important thing is the call to 'show' to display the actual picker. – David Hedlund Apr 02 '13 at 15:10

score 0 · Answer 2 · answered Apr 02 '13 at 14:11

Not sure which version of JQuery you are using, but if it is 1.7+ '.live()' is deprecated and if it is 1.9+ it has been removed. Link

Additionally, I would suggest using the document.ready function to initialize.

function showDate(){
    var dateDiv = $('#dateDiv');
    for(ind=0; ind<=5; ind++){
         var date = $('<img src="calendar.png" class="datepicker" id="'+ind+'-date" /><input type="hidden" id="'+ind+'-date-picker" /><br />');
        dateDiv.append(date);
    }
}

$(document).ready( function(){
    showDate();

    $('.datepicker').on('click', function(){
        var $datepicker =$(this).attr('id');
        $datepicker += '-picker';
        $('#'+$datepicker).datepicker();
    });
});

Here is a fiddle of the above

display datepicker on dynamically created button

2 Answers2