AngularJs中Bootstrap3 datetimepicker使用執行個體_javascript技巧

關於datetimepicker的使用，參考：http://www.jb51.net/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();  }); }); 

效果圖：

如果大家還想深入學習，可以點擊這裡進行學習，再為大家附3個精彩的專題：

Bootstrap學習教程

Bootstrap實戰教程

Bootstrap Table使用教程

Bootstrap外掛程式使用教程

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。