Tuesday, March 15, 2016

Calendar for Bootstrap 3 - Easy way

Straight to Calendar control in Bootstrap 3, You need to reference additional bootstrap calendar js file.

 <link href="scripts/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet" />  
 <script src="scripts/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>  
 <script src="scripts/bootstrap-datepicker/locales/bootstrap-datepicker.fr.min.js"></script>  

For localization, the file "bootstrap-datepicker.fr.min.js" is added.

You can download these files from "https://github.com/eternicode/bootstrap-datepicker"

And lets add a textbox for the datepicker to bind with,

 <asp:TextBox ID="txtdtBorn" runat="server" CssClass="date-picker form-control txt-common-style" ClientIDMode="Static"></asp:TextBox>  

And then in the page js file, inside the document ready; add the following,

   $("#txtdtBorn").datepicker({  
     format: 'yyyy-mm-dd',  
     autoclose: true,  
     todayHighlight: true,  
     calendarWeeks: false,  
     clearBtn: false,  
     immediateUpdates: true,  
     keyboardNavigation: true,  
     language: 'fr'      
   });  

And the ultimate result looks like below;


And it is french too. :)

Happy coding...

No comments:

Post a Comment