Datepicker、Timepicker
公孙智
Datepicker Settings
show-weeks：是否显示每月的第几周，默认为turestarting-day：日历显示的时间的第一个日期，默认为0，(0=Sunday, ..., 6=Saturday)min：定义最小的显示时间，默认为空- max：定义最大的显示时间，默认为空
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：日期的格式，即每月的中的当前日期，默认ddmonth-format：默认为MMMMyear-format：默认为yyyy
year-range：时间的选择范围，默认为20day-header-format：(Default: 'EEE') : Format of day in week header.day-title-format：(Default: 'MMMM yyyy') : Format of title when selecting day.month-title-format：(Default: 'yyyy') : Format of title when selecting month.
Popup Settings
通过datepicker-options来设置，格式为json
弹出的具体设置如下：
datepicker-popup：显示日期的格式，默认为yyyy-MM-ddcurrent-text：选择当天的按钮的显示文本，默认为Todaytoggle-weeks-text：默认为Weeksclear-text：默认为Clearclose-text：默认为Doneclose-on-date-selection：默认为true，选择日期后是否关闭datepicker-append-to-body：
注：如果需要中文，可以引入i18n/angular-locale_zh-cn.js
<!DOCTYPE html>
<html ng-app="Demo">
<head>
<title></title>
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="lib/angular/angular.min.js"></script>
<script src="lib/jquery/jquery-1.10.2.min.js"></script>
<script src="lib/bootstrap-gh-pages/ui-bootstrap-tpls-0.7.0.min.js"></script>
<script src="lib/angular/i18n/angular-locale_zh-cn.js"></script>
</head>
<body>
<div ng-controller="DatepickerDemoCtrl">
<pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
<h4>Inline</h4>
<div class="well well-small" ng-model="dt" style="display:inline-block;">
<datepicker min="minDate" show-weeks="showWeeks"></datepicker>
</div>
<h4>Popup</h4>
<div class="form-horizontal">
<p>
<input type="text" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>
</p>
<p><i>Format options:</i> <select ng-model="format" ng-options="f for f in formats"><option></option></select></p>
</div>
<hr />
<button class="btn btn-small btn-inverse" ng-click="today()">Today</button>
<button class="btn btn-small btn-inverse" ng-click="dt = '2009-08-24'">2009-08-24</button>
<button class="btn btn-small btn-success" ng-click="toggleWeeks()" tooltip="For inline datepicker">Toggle Weeks</button>
<button class="btn btn-small btn-danger" ng-click="clear()">Clear</button>
<button class="btn btn-small" ng-click="toggleMin()" tooltip="After today restriction">Min date</button>
</div>
<script>
var Demo = angular.module('Demo', ['ui.bootstrap']);
var DatepickerDemoCtrl = function ($scope, $timeout) {
$scope.today = function() {
$scope.dt = new Date();
};
$scope.today();
$scope.showWeeks = true;
$scope.toggleWeeks = function () {
$scope.showWeeks = ! $scope.showWeeks;
};
$scope.clear = function () {
$scope.dt = null;
};
// Disable weekend selection
$scope.disabled = function(date, mode) {
return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
};
$scope.toggleMin = function() {
$scope.minDate = ( $scope.minDate ) ? null : new Date();
};
$scope.toggleMin();
$scope.open = function() {
$timeout(function() {
$scope.opened = true;
});
};
$scope.dateOptions = {
'year-format': "'yy'",
'starting-day': 1
};
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'shortDate'];
$scope.format = $scope.formats[0];
};
</script>
</body>
</html>Timepicker
hour-step：时间变化的步长，默认为1minute-step：分钟变化的步长，默认为1show-meridian：是否显示am、pm切换，默认为true
meridians：切换am、pm的文本，默认为['AM','PM']readonly-input：是否允许用户输入，默认为falsemousewheel：当输入框获得焦点时，是否允许用户用滚滑轮变化数值大小，默认为ture
<!DOCTYPE html>
<html ng-app="Demo">
<head>
<title></title>
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="lib/angular/angular.min.js"></script>
<script src="lib/jquery/jquery-1.10.2.min.js"></script>
<script src="lib/bootstrap-gh-pages/ui-bootstrap-tpls-0.7.0.min.js"></script>
<script src="lib/angular/i18n/angular-locale_zh-cn.js"></script>
</head>
<body>
<div ng-controller="TimepickerDemoCtrl">
<div ng-model="mytime" ng-change="changed()" class="well well-small" style="display:inline-block;">
<timepicker hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></timepicker>
</div>
<pre>Time is: {{mytime | date:'shortTime' }}</pre>
<div>Hours step is: <select ng-model="hstep" ng-options="opt for opt in options.hstep"></select></div>
<div>Minutes step is: <select ng-model="mstep" ng-options="opt for opt in options.mstep"></select></div>
<button class="btn" ng-click="toggleMode()">12H / 24H</button>
<button class="btn" ng-click="update()">Set to 14:00</button>
<button class="btn btn-danger" ng-click="clear()">Clear</button>
</div>
<script>
var Demo = angular.module('Demo', ['ui.bootstrap']);
var TimepickerDemoCtrl = function ($scope) {
$scope.mytime = new Date();
$scope.hstep = 1;
$scope.mstep = 15;
$scope.options = {
hstep: [1, 2, 3],
mstep: [1, 5, 10, 15, 25, 30]
};
$scope.ismeridian = true;
$scope.toggleMode = function() {
$scope.ismeridian = ! $scope.ismeridian;
};
$scope.update = function() {
var d = new Date();
d.setHours( 14 );
d.setMinutes( 0 );
$scope.mytime = d;
};
$scope.changed = function () {
console.log('Time changed to: ' + $scope.mytime);
};
$scope.clear = function() {
$scope.mytime = null;
};
};
</script>
</body>
</html>
类似资料：