AngularJs中Bootstrap3 datetimepicker使用实例
编程学习 2021-07-04 19:19www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了AngularJs中Bootstrap3 datetimepicker使用实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
关于datetimepicker的使用，参考：
在AngularJs中使用实例：
HTML代码：
<div class="container" ng-app="myApp" ng-controller="myCtrl">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<label>选择日期：</label>
<!--指定 date标记-->
<div class='input-group date' datetimepicker id='datetimepicker1'>
<input type='text' class="form-control" ng-model="dateOne"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<p>结果：{{dateOne}}</p>
</div>
<div class='col-sm-6'>
<div class="form-group">
<label>选择日期+时间：</label>
<!--指定 date标记-->
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" ng-model="dateTwo" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<p>结果：{{dateTwo}}</p>
</div>
</div>
</div>
JS代码：
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
//在Controller中绑定选择控件
var datepicker1 = $('#datetimepicker1').datetimepicker({
format: 'YYYY-MM-DD',
locale: moment.locale('zh-cn')
}).on('dp.change', function (e) {
var result = new moment(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) {
var result = new moment(e.date).format('YYYY年MM月DD日 hh:mm');
$scope.dateTwo= result;
$scope.$apply();
});
});
效果图：
如果大家还想深入学习，可以点击进行学习，再为大家附3个精彩的专题：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。