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插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索angularjs
， datetimepicker
bootstrap3
datetimepicker实例、angularjs bootstrap、bootstrap与angularjs、angularjs2 bootstrap、bootstrap和angularjs，以便于您获取更多的相关知识。