Angular Date Range Picker Directive With Bootstrap

Angular Date Range Picker Directive with Bootstrap

Angular Date Range Picker – In this post we will give you code and demo for Angular Date Range Picker Directive with Bootstrap. Hear we give you code and demo of Date Range Picker using Angularjs Directive with Bootstrap. It will help you to understand this code.

Angular Material Date Range Picker Directive

The Angular Date Range Picker is combine with text input. Angularjs Date Range Picker will use the current value of the input to initialize, and update the input if new dates are chosen.

ussage/code example

install using npm packages = npm install md-date-range-picker
install using bower = bower install md-date-range-picker

Demo for Angular Material Date Range

View DemoGit Code

example.html

Hear is code for Date Range Picker Directive, create index.html and add this code to you .html page.

<!-- add you app name -->
<body ng-app="demo.app" ng-cloak>
  <!-- add you app controller -->	
  <div ng-controller="ctrl">
	<!-- assign date -->
    <h2>{{'2017-01-26T14:47:56Z' | date: 'medium'}}</h2>
	<!-- assign button for Date Range -->
    <md-button ng-click="pick($event, false)" class="md-raised md-primary" >select A Date Range</md-button>
	<!-- assign button for Date Range With Template -->
    <md-button ng-click="pick($event, true)" class="md-raised md-primary" >select A Date Range Using Template</md-button>
	<!-- assign button for Clear Range -->
    <md-button ng-click="clear($event)" class="md-raised md-primary" >Clear Range</md-button>
	<!-- Select date -->
    <md-date-range placeholder="Select Your Date Range" ng-model="selectedRange" ></md-date-range>
	<!-- print Select date -->
    <h2>Selected Your Date Range: {{selectedRange.dateStart | date}} - {{selectedRange.dateEnd | date}}</h2>
	<!-- print Select Template -->
    <h2>Selected Your Date Template:{{selectedRange.selectedTemplateName}} - {{selectedRange.selectedTemplate}}</h2>
    <!-- Selected range picker -->
	<md-date-range-picker
      md-on-select="onSelect()"
	  date-end="selectedRange.dateEnd"
      date-start="selectedRange.dateStart"
      show-template="true"
	  selected-template="selectedRange.selectedTemplate"
      selected-template-name="selectedRange.selectedTemplateName"
    ></md-date-range-picker>
  </div>
</body>

Devlopment tools for Angular Material Date Range Picker Directive

npm => npm install
dev serve => npm start
build => npm run build
dist serve => npm run dist

ussage/code example for Angular Material Date Range Picker Directive

install using npm packages
npm install md-date-range-picker
install using bower
bower install md-date-range-picker