AngularJs中Bootstrap3 datetimepicker的使用方法

關於 datetimepicker的使用，參考：http://www.111cn.net/wy/js-ajax/125216.htm

在AngularJs中使用執行個體：

HTML代碼：

<divclass="container"ng-app="myApp"ng-controller="myCtrl"> <divclass="row"> <divclass='col-sm-6'> <divclass="form-group"> <label>選擇日期：</label> <!--指定 date標記--> <divclass='input-group date'datetimepickerid='datetimepicker1'> <inputtype='text'class="form-control"ng-model="dateOne"/> <spanclass="input-group-addon"> <spanclass="glyphicon glyphicon-calendar"></span> </span> </div> </div> <p>結果：{{dateOne}}</p> </div> <divclass='col-sm-6'> <divclass="form-group"> <label>選擇日期+時間：</label> <!--指定 date標記--> <divclass='input-group date'id='datetimepicker2'> <inputtype='text'class="form-control"ng-model="dateTwo"/> <spanclass="input-group-addon"> <spanclass="glyphicon glyphicon-calendar"></span> </span> </div> </div> <p>結果：{{dateTwo}}</p> </div> </div> </div>

JS代碼：

varapp = angular.module('myApp', []); app.controller('myCtrl',function($scope) { //在Controller中綁定選擇控制項 vardatepicker1 = $('#datetimepicker1').datetimepicker({ format:'YYYY-MM-DD', locale: moment.locale('zh-cn') }).on('dp.change',function(e) { varresult =newmoment(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) { varresult =newmoment(e.date).format('YYYY年MM月DD日 hh:mm'); $scope.dateTwo= result; $scope.$apply(); }); });

效果圖：