乐码库:一个极速、放心、纯净的下载站! 更新: 资源发布
  • 您的位置:首页 > 技术文档 > JavaScript > AngularJs中Bootstrap3 datetimepicker使用实例
  • 收藏本页
      AngularJs中Bootstrap3 datetimepicker使用实例
      发布时间:2016-12-21 08:10:59 关键词: AngularJs,Bootstrap3,datetimepicker
      内容简介:这篇文章主要为大家详细介绍了AngularJs中Bootstrap3 datetimepicker使用实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

      最新更新
      热门排行榜