当前位置:主页 > 网页前端 > JavaScript代码 >

AngularJs中Bootstrap3 datetimepicker使用实例

时间:2022-11-07 09:37:54 | 栏目:JavaScript代码 | 点击:

关于datetimepicker的使用,参考:https://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插件使用教程

您可能感兴趣的文章:

相关文章