AngularJs中Bootstrap3 datetimepicker的使用方法
发布时间：01/15 来源： 浏览：
关键词：
小编推荐的这篇文章介绍了AngularJs中Bootstrap3 datetimepicker的使用方法，代码很简单，希望大家喜欢
关于 datetimepicker的使用，参考：http://www.111cn.net/wy/js-ajax/125216.htm
在AngularJs中使用实例：
HTML代码：
|
<divclass="container"ng-app="myApp"ng-controller="myCtrl">
<divclass="row">
<divclass='col-sm-6'>
<divclass="form-group">
<label>选择日期：</label>
<!--指定 date标记-->
<divclass='input-group date'datetimepickerid='datetimepicker1'>
<inputtype='text'class="form-control"ng-model="dateOne"/>
<spanclass="input-group-addon">
<spanclass="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<p>结果：{{dateOne}}</p>
</div>
<divclass='col-sm-6'>
<divclass="form-group">
<label>选择日期+时间：</label>
<!--指定 date标记-->
<divclass='input-group date'id='datetimepicker2'>
<inputtype='text'class="form-control"ng-model="dateTwo"/>
<spanclass="input-group-addon">
<spanclass="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<p>结果：{{dateTwo}}</p>
</div>
</div>
</div>
|
JS代码：
|
varapp = angular.module('myApp', []);
app.controller('myCtrl',function($scope) {
//在Controller中绑定选择控件
vardatepicker1 = $('#datetimepicker1').datetimepicker({
format:'YYYY-MM-DD',
locale: moment.locale('zh-cn')
}).on('dp.change',function(e) {
varresult =newmoment(e.date).format('YYYY-MM-DD');
$scope.dateOne = result;
$scope.$apply();
});
$('#datetimepicker2').datetimepicker({
format:'YYYY年MM月DD日 hh:mm',
locale: moment.locale('zh-cn')
}).on('dp.change',function(e) {
varresult =newmoment(e.date).format('YYYY年MM月DD日 hh:mm');
$scope.dateTwo= result;
$scope.$apply();
});
});
|
效果图：
