pickadate does not look as it should

Question

I'm using jsf 2.0 and I'm working the first time with pickadate, but it does not look like they show on their website (http://amsul.ca/pickadate.js/). Sorry, I'm not allowed to post a picture... But though I included the right css files, my calendar looks like all the numbers for the dates are written in one column and not under the appropriated days, like on the website.

Here is my code:

<h:inputText class="datepicker" id="datepicker" binding="#{datepickerInput}"
                                         onclick="
                                                 var input = $('.datepicker').pickadate({
                                                     monthsFull: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
                                                     weekdaysShort: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'],
                                                     formatSubmit: 'dd/mm/yyy',
                                                     format: 'dd.mm.yyyy'
                                                 });
                                                 var picker = input.pickadate('picker');
                                                 picker.open();
                                         "/>

Does anybody had the same problems with pickadate and knows a solution? Or do you know a good alternative for pickadate? Thanks

Answer 1

Bind date picker using jQuery on click. Don't write code on onclick event of element from html.It could be more better if you include this inside directive.

Directive

app.directive('datepicker', function(){
   return{
     restrict: 'AE',
     link: function(scope, element, attrs){
        element.pickadate({
            monthsFull: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
            weekdaysShort: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'],
            formatSubmit: 'dd/mm/yyy',
            format: 'dd.mm.yyyy'
        });
        var picker = element.pickadate('picker');
        picker.open();
     }
   }
});