AngularJs中Bootstrap3 datetimepicker使用實例

2019-11-19 18:31:31

字體：大中小

來源：轉載

供稿：網友

關于datetimepicker的使用，參考：//m.survivalescaperooms.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();  }); });

效果圖：