AngularJs中Bootstrap3 datetimepicker使用实例

2019-11-19 18:31:31

字体：大中小

来源：转载

供稿：网友

关于datetimepicker的使用，参考：//www.VeVB.COm/article/99896.htm

在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();  }); });

效果图：