DIV CSS 佈局教程網

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

效果圖：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。