Bootstrap3 datetimepicker在AngularJs中使用实例

推荐使用这个版本：Bootstrap3 datetimepicker控件之smalot的使用

关于 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',
        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