CODEWITHSUNDEEP
jqueryalloy-ui
WelcomeTo
WelcomeTo

Reputation: 20591

Apply Alloy UI 1.5 datepicker to multiple instances

I want to create Alloy UI datapickers on multiple form fields: 

<div id="date_1_wrapper">
    <input type="text" class="datepick" id="date_1" />
</div>
<div id="date_2_wrapper">
    <input type="text" class="datepick" id="date_2" />
</div>

Using JQuery I can do it using following code: 

$('.datepick').each(function(){
    $(this).datepicker();
});

But how to achieve same functionality in Alloy UI?

For now I use following code, but this code apply DatePickers by ID, not by CSS class in loop: 

AUI().use(
        'aui-datepicker',
        function(A) {

            new A.DatePicker (
                    {
                        calendar: {
                            dateFormat: '%d/%m/%Y'
                        },
                        trigger: '#date_1'
                    }
            ).render('#date_1_wrapper');

            new A.DatePicker(
                    {
                        calendar: {
                            dateFormat: '%d/%m/%
                        },
                        trigger: '#date_2'
                    }
            ).render('#date_2_wrapper');
        }
);

I think this code can be used in beginning, but what is next? How to deal with input's and div's ID's? 

(A.all('.datepcik').each(function() {)

Upvotes: 1

Views: 786

Answers (1)

Byran Zaugg
Byran Zaugg

Reputation: 957

You can do the same thing as jQuery. render() is expecting either a Node or a selector. Try this:

--UPDATED--

A.all('.datepick').each(function(node, index, nodeList){
    new A.DatePicker({
        calendar: {
            dateFormat: '%d/%m/%'
        },
        trigger: node
    }).render();
});

http://yuilibrary.com/yui/docs/api/classes/NodeList.html#method_each

Upvotes: 1

Related Questions