首页 > 代码库 > angular--bootstrap实例日期控件【datepicker】
angular--bootstrap实例日期控件【datepicker】
head部分:
<!--Bootstrap-->
<link rel="stylesheet" href="http://www.mamicode.com/supProdom/script/bootstrap/dist/css/bootstrap.min.css" />
<script src="http://www.mamicode.com/supProdom/script/bootstrap/dist/js/bootstrap.min.js"></script>
<!--plugin : bootstrap timepicker-->
<link rel="stylesheet" href="http://www.mamicode.com/supProdom/script/bootstrap-datetimepicker/bootstrap-datetimepicker.css"/>
<script src="http://www.mamicode.com/supProdom/script/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>
<script src="http://www.mamicode.com/supProdom/script/bootstrap-datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="http://www.mamicode.com/supProdom/script/js/Addsup.js"></script>
<script src="http://www.mamicode.com/supProdom/script/js/js/controller.js"></script>
<script src="http://www.mamicode.com/supProdom/script/js/js/CincoJiang.js"></script>
html部分
body ng-app="myApp" ng-controller="addCtrl">
<form id="form@Form">
<table class="table table-hover" >
<tr>
<td width="10%" align="right" class="control-label">成立日期:</td>
<td>
<div class="form-group">
<div ng-model=‘timepickerTest‘ ng-time class="input-group date form_date col-md-5" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input" data-link-format="yyyy-mm-dd">
<input class="form-control" size="16" ng-model="input" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<input type="hidden" id="dtp_input" value="" /><br/>
</div>
</td>
</tr>
</table>
js代码:
Addsup.js:
var supModule = angular.module(‘myApp‘, [ ‘app.controllers‘,
‘app.directives‘]);
supModule.controller(‘addCtrl‘, [‘$scope‘, function ($scope) {
}]);
controller.js
angular.module(‘app.controllers‘, [])
.controller(‘appCtrl‘,[‘$scope‘,function ($scope) {
$scope.test = ‘test‘;
console.log($scope.test);
}]);
CincoJiang.js:
‘use strict‘;
angular.module(‘app.directives‘, [])
.directive(‘ngTime‘, function() {
return {
restrict : ‘A‘,
require : ‘?ngModel‘,
link : function($scope, $element, $attrs, $ngModel) {
if (!$ngModel) {
return;
}
$(‘.form_date‘).datetimepicker({
language: "zh-CN",
format:"yyyy-mm-dd",
todayBtn:true,
clearBtn:false,// 自定义属性,true 显示 清空按钮 false 隐藏 默认:true
startView:2,
minView:2,
weekStart: 1,
todayHighlight: 1,
autoclose: 1,
forceParse: 0
});
},
};
});
angular--bootstrap实例日期控件【datepicker】