Angularjs with Bootstrap

Angularjs with Bootstrap

Introduction

This blog helps us to create tabs, accordions, collapsible, modals, and dropdowns without the need of a dedicated library. It will work either with bootstrap 2 or 3, because it is not dependent on bootstrap markup at all.

  • Twitter provides Bootstrap UI for AngularJS in directive format. This results in more cleaner and beautiful UI in AngularJS application.
  • In this Demo, “We will learn how to integrate Twitter Bootstrap UI for AngularJS web application. Then we will test a Bootstrap progress bar component using a AngularJS controller”.

Initialize Bootstrap in Angularjs

Let’s get started by downloading Bootstrap angular UI project from the following link. In this link you can see two type of Bootstrap JS file:-

  • “ui-bootstrap-tpls-[version].min.js”
  • “ui-bootstrap-[version].min.js”

To inject Bootstrap UI module we need to pass the ‘ui.bootstrap’ module to the controller. Now the controller.js file will appear, as shown below

The index.html file will appear as shown below,

Use Case

This use case is to implement Datepicker (ui.bootstrap.datepicker)

Code Integration for Datepicker (ui.bootstrap.datepicker):

  • Template view of Datepicker

datepicker template

  • Html
  • Javascript:

Datepicker Settings:

All settings can be provided as attributes in the <datepicker>, or globally configured through datepickerConfig.

  • ng-model : The date object.
  • show-weeks(Defaults: true) : Displays number of weeks.
  • starting-day(Defaults: 0) : Starting day of the week from 0-6 (0=Sunday, …, 6=Saturday).
  • min(Default: null) : Defines the minimum available date.
  • max(Default: null) : Defines the maximum available date.
  • date-disabled (date, mode)(Default: null) : An optional expression to disable visible options based on passing date and current mode (day|month|year).
  • day-format(Default: ‘dd’) : Formats number of days  in a month.
  • month-format(Default: ‘MMMM’) : Formats number of month in a year.
  • year-format(Default: ‘yyyy’) : Formats number of years  in the year range.
  • year-range(Default: 20) : Displays number of years in the selected range.
  • day-header-format(Default: ‘EEE’) : Formats number of days in a week header.
  • day-title-format(Default: ‘MMMM yyyy’) : Formats title when selecting day.
  • month-title-format(Default: ‘yyyy’) : Formats title when selecting month.

Popup Settings:

Options for datepicker can be passed through JSON using, the datepicker-options attribute. Specific settings for the datepicker-popup that can globally configured through the datepickerPopupConfig, are:

  • datepicker-popup(Default: ‘yyyy-MM-dd’) : The format for displaying dates.
  • show-button-bar(Default: true) : To display a button bar underneath the datepicker.
  • current-text(Default: ‘Today’) : The text which displays the current day button.
  • clear-text(Default: ‘Clear’) : The text which displays clear button.
  • close-text(Default: ‘Done’) : The text which displays close button.
  • close-on-date-selection(Default: true) : To close calendar when a date is chosen.
  • datepicker-append-to-body(Default: false): Appends the datepicker popup element to body, rather than inserting after datepicker-popup. For global configuration, use datepickerPopupConfig.appendToBody.

Keyboard Support:

Depending on datepicker’s current mode, the date may refer either to day, month or year. Accordingly, the term view refers either to a month, year or year range.

  • Left: Move focus to the previous date. Will move to the last date of the previous view, if the current date is the first date of a view.
  • Right: Move focus to the next date. Will move to the first date of the following view, if the current date is the last date of a view.
  • Up: Move focus to the same column of the previous row. Will wrap to the appropriate row in the previous view.
  • Down: Move focus to the same column of the following row. Will wrap to the appropriate row in the following view.
  • PgUp: Move focus to the same date of the previous view. If that date does not exist, focus is placed on the last date of the month.
  • PgDn: Move focus to the same date of the following view. If that date does not exist, focus is placed on the last date of the month.
  • Home: Move to the first date of the view.
  • End: Move to the last date of the view.
  • Enter/Space: Select date.
  • Ctrl+Up: Move to an upper mode.
  • Ctrl+Down: Move to a lower mode.
  • Esc: Will close popup, and move focus to the input.

Challenges

  • The datepicker library has date as date object. Hence, when we assign default date (apply selected date) in datepicker, we will face issue on displaying different date for different time zones.This is because the date object contains the time value.

Solution

  • Create a date by substituting year, month, and date as string, instead of substituting date object to create date.  This solution will provide the same date as the selected date in datepicker for all time zones.

Date creating method to apply selected date in datepicker

  • Controller
  • Template 

Conclusion

In this AngularJs Bootstrap series we have showed how to build simple datepicker directive. We can use this basic code and build over it for more customized directives with additional custom attributes and implement more of the options provided by Bootstrap’s datepicker widget, and we could also customize the looks of the datepicker with some custom css styles.

Reference

 

9202 Views 3 Views Today
  • Sanket

    Hello,
    I am making one web service using angularjs,js,nodejs,mlab,bootstrap,etc. I’m facing some issues such as to remove the or delete the added record from the mlab by hitting button on the ui also I need to add one search bar in my list.html to search the record according to its name .I am new to all this technologies ..Your help will provide a great helping hand to me..thank you