Bootstrap3 datetimepicker在AngularJs中使用实例
发布时间:2020-12-17 20:58:37 所属栏目:安全 来源:网络整理
导读:关于 datetimepicker的使用,参考:http://blog.csdn.net/u011127019/article/details/51725081 在AngularJs中使用实例: HTML代码: div class="container" ng-app="myApp" ng-controller="myCtrl" div class="row" div class='col-sm-6' div class="form-g
关于 datetimepicker的使用,参考:http://blog.csdn.net/u011127019/article/details/51725081 在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',function (e) { var result = new moment(e.date).format('YYYY年MM月DD日 hh:mm'); $scope.dateTwo= result; $scope.$apply(); }); }); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |