CCMS DatePicker Demo

by Corvine

HTML

<script src="https://cdn.bootcss.com/angular.js/1.5.6/angular.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.5.6/angular-resource.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<script src="https://114.215.169.170/dist/ccms-components.js"></script>
<main ng-controller="ctrl as app">
  <section>
    <date-picker ng-model="app.dateValue"
                 min-date="app.minDate"
                 max-date="app.maxDate"
                 date-only="false"
                 required="true"
                 disabled="false"></date-picker>
  </section>

  <section>
    <date-range opts="app.dateRange"></date-range>
  </section>
</main>

SCSS

section {
  padding: 1em;
}

JavaScript

angular.module('app', ['ccms.components', 'ngResource'])

.controller('ctrl', function() {
	this.dateValue = new Date();
  this.minDate = new Date(2016, 2, 1);
  this.maxDate = new Date(2016, 3, 1);

  this.dateRange = {
  	start: new Date(2016, 2, 10),
  	end: new Date(2016, 2, 20),

  	minDate: new Date(2016, 2, 1),
  	maxDate: new Date(2016, 2, 31),

  	// 是否禁用 (false)
  	disabled: false,

  	// 是否显示时间 (true)
  	dateOnly: false
	};
});