我尝试更改datepicker的布局。我正在为angular-ui
datepicker
引导程序
我使用这个标签
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="model" is-open="opened" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
任何人都可以举个例子吗?
我的布局: http://i.stack.imgur.com/y9tkp.jpg 我想要的布局: https://raw.github.com/dalelotts/angular-bootstrap-datetimepicker/master/screenshots/day.png
答案 0 :(得分:0)
你应该看看Angular-Strap项目,该项目试图实现相同的功能。
看看这些demos。是不是非常接近你想要的布局?
答案 1 :(得分:0)
答案 2 :(得分:-2)
我刚刚为eternicode与Bootstrap Datepicker集成的 AngularStrap DatePicker 构建了一个模板。我认为eternicode datepicker的输出完全看起来像你需要的。
这是我的模板代码:
'<div class="datepicker datepicker-dropdown dropdown-menu datepicker-orient-left datepicker-orient-top" ng-class="\'datepicker-mode-\' + $mode"><div class="datepicker-days" style="display:block;"><table class=" table-condensed" style="width: 100%"><thead><tr><th class="prev" style="visibility: visible;" ng-click="$selectPane(-1)"><i class="{{$iconLeft}}"></i></th><th colspan="{{ rows[0].length - 2 }}" class=" datepicker-switch" ng-click="$toggleMode()" ng-bind="title"></th><th class="next" style="visibility: visible;" ng-click="$selectPane(+1)"><i class="{{$iconRight}}"></i></th></tr><tr ng-show="showLabels" ng-bind-html="labels"></tr></thead><tbody><tr ng-repeat="(i, row) in rows"><td class="day" ng-repeat="(j, el) in row" ng-class="{\'btn-primary\': el.selected, \'btn-info btn-today\': el.isToday && !el.selected, \'text-muted\': el.muted, \' old \':el.muted}" ng-click="$select(el.date)" ng-disabled="el.disabled" ng-bind="el.label"></td></tr></tbody></table></div></div>'
您可以使用 angular-strap.tpl.js 中的内置模板替换此行,或将其放入AngularStrap默认模板路径中的新.html文件中datepicker在 datepicker / datepicker.tpl.html 中。 最后,您应该将css or less版本的eternicode datepicker添加到您的页面。
我希望这对你有所帮助。