加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读