Lightning Components - Add jquery calender which allows users only to select first day of every month

create a lightning component like this,


<aura:component >
    <ltng:require scripts="{!join(',',
                           $Resource.jquerycal,
                           $Resource.jqueryuical,
                           $Resource.firstdaycal)}" />
 
    <br />
    jquery calendar
    <input type="text" id="foo" />
</aura:component>





Add jquerycal,jqueryuical,firstdaycal as a static resource to salesforce org,

firstdaycal is the constructed one and is

$(document).ready(function(){
      $("#foo").datepicker(
                    {
                    beforeShowDay: function (date) {
                    //getDate() returns the day (0-31)
                    if (date.getDate() == 1) {
                    return [true, ''];
                    }
                    return [false, ''];
                    }
                    }
                 
                    );
 
});


where jquerycal stands for
https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
and jqueryuical stands for
https://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.js