AngularJS Bootstrap 使日期计时器选择器响应答案

【问题标题】：AngularJS Bootstrap make the datetimer picker responsiveAngularJS Bootstrap 使日期计时器选择器响应
【发布时间】：2015-06-08 21:21:10
【问题描述】：

我正在尝试让 datetimepicker 响应引导程序但遇到问题。我看过这个插件：

https://github.com/niftylettuce/bootstrap-datepicker-mobile#requirements

在我的应用程序中使用它会很棒，但问题是我的应用程序不使用 jQuery（我也不希望它使用）。我的日期选择器设置如下：

<div class="col-md-4">
    <div ng-model="controller.today" datepicker ng-change="controller.getArchive()"></div>
</div>

有谁知道我如何在不使用 jQuery 的情况下使 datetimepicker 响应？

【问题讨论】：

标签： angularjs twitter-bootstrap

【解决方案1】：

我自己设法解决了这个问题。我创建了自己的模板，如下所示：

<script id="template/datepicker/datepicker.html" type="text/ng-template">
    <div class="datepicker" ng-switch="datepickerMode" role="application" ng-keydown="keydown($event)">
        <daypicker ng-switch-when="day" tabindex="0"></daypicker>
        <monthpicker ng-switch-when="month" tabindex="0"></monthpicker>
        <yearpicker ng-switch-when="year" tabindex="0"></yearpicker>
    </div>
</script>

<script id="template/datepicker/day.html" type="text/ng-template">
    <div>
        <div class="row">
            <div class="col-xs-2">
                <button class="btn btn-default btn-block" ng-click="move(-1)" tabindex="-1"><span class="fa fa-chevron-left"></span></button>
            </div>
            <div class="col-xs-8">
                <button class="btn btn-default btn-block" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1">{{ title }}</button>
            </div>
            <div class="col-xs-2">
                <button class="btn btn-default btn-block"><span class="fa fa-chevron-right"></span></button>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="flexbox">
                    <div ng-repeat="label in labels track by $index">
                        <small aria-label="{{ label.full }}">{{ label.abbr }}</small>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="flexbox" ng-repeat="row in rows track by $index">
                    <div ng-repeat="dt in row track by dt.date">
                        <button class="btn btn-default btn-block" ng-class="{'btn-info': dt.selected, active isactive(dt)}" ng-click="select(dt.date)" ng-disabled="dt.disabled" tabindex="-1"><span ng-class="{'text-muted': dt.secondary, 'text-info' dt.current}">{{ dt.label }}</span></button>
                    </div>                        
                </div>
            </div>
        </div>
    </div>
</script>

然后我创建了 2 个 SASS 文件，一个用于实际的日期选择器：

.datepicker {
    text-align: center;

    .row { 
        > div {
            padding-left: 1px;
            padding-right: 1px;

            &:first-child {
                padding-left: 15px;
            }

            &:last-child {
                padding-right: 15px;
            }
        }

        > .col-xs-12,
        > .col-sm-12,
        > .col-md-12,
        > .col-lg-12 {
            padding-left: 15px;
            padding-right: 15px;
        }
    }

    .flexbox {
        margin-top: -1px;

        &:first-child {
            margin-top: 2px;
        }
    }
}

还有一个弹性盒子：

.flexbox {
    display: flex;

    > div {
        -ms-flex: 1 auto;
            flex: 1 auto;

        margin-left: -1px;

        &:first-child {
            margin-left: 0;
        }
    }
}

这解决了我的问题。当我替换所有模板后，我会更新它，我会添加一个 jsfiddle。

【讨论】：