Bootstrap3 datetimepicker在AngularJs中使用实例

原文链接

关于 datetimepicker的使用，参考：http://blog.csdn.net/u011127019/article/details/51725081

在AngularJS中使用实例：

HTML代码：

[html] view
plain copy

 print?

<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代码：

[javascript] view
plain copy

 print?

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

    });  

});  



更多：

Bootstrap3 datetimepicker控件的使用

RequireJS实例

基于Bootstrap的jQuery slider插件的使用bootstrap-slider.js