AngularJS集成Bootstrap3 datetimepicker实现日期选择

AngularJS集成Bootstrap3 datetimepicker实现日期选择

关于datetimepicker的具体用法，可参考相关技术文档：https://www.jb51.net/article/99896.htm

以下是在AngularJS环境中使用该插件的具体实现示例：

HTML结构定义

首先编写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> 

JavaScript逻辑实现

接着编写JavaScript控制逻辑代码：

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

界面效果展示

最终运行的界面效果如下所示：

延伸学习资源

若需进一步深入掌握，建议点击此处进行系统学习，本站还额外提供了三个精选专题供参考：

Bootstrap基础学习教程

Bootstrap实战应用教程

Bootstrap Table组件使用指南

Bootstrap各类插件集成教程

以上内容即为本文的全部介绍，希望能为读者的学习带来帮助，同时也欢迎持续关注本站以获取更多资源。