Question

我正在尝试使datetimepicker响应bootstrap，但有问题。我见过这个插件：

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

在我的应用程序中使用会很棒，但问题是我的应用程序没有使用jQuery（我也不想这样做）。我有这样的datepicker设置：

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

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

Answer 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：

.flexbox {
    display: flex;

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

        margin-left: -1px;

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

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

AngularJS Bootstrap使datetimer选择器响应

1 个答案: