Я хочу скрыть только кнопку очистки из директивы datepicker в angular js. В настоящее время в нижней части директивы angular js datePicker есть три кнопки (сегодня, очистить и закрыть). Есть ли способ настроить видимость этих кнопок, чтобы я мог скрыть одну из них.
Средство выбора даты, которое я использую, использует библиотеку ui-bootstrap.
В настоящее время теперь есть способ скрыть отдельные кнопки на панели кнопок выбора даты с помощью параметров директивы. Вы можете переопределить шаблон и удалить кнопку очистки, но это глобальный патч, который не предлагает скрытие/отображение в зависимости от условия. Вы можете создать класс, нацеленный на кнопку, которую вы хотите скрыть, как этот plunk
.datepicker-noclear [ng-click="select(null)"] {
display: none;
}
демонстрирует, хотя это хрупкий обходной путь.
Я бы предложил отправить запрос функции, чтобы добавить параметр, какие кнопки доступны на панели кнопок.
Легко, замените шаблон:
<script type="text/ng-template" id="template/datepicker/popup.html">
<ul class="dropdown-menu" ng-if="isOpen" style="display: block" ng-style="{top: position.top+'px', left: position.left+'px'}" ng-keydown="keydown($event)" ng-click="$event.stopPropagation()">
<li ng-transclude></li>
<li ng-if="showButtonBar" style="padding:10px 9px 2px">
<span class="btn-group pull-left">
<button type="button" class="btn btn-sm btn-info" ng-click="select('today')" ng-disabled="isDisabled('today')">{{ getText('current') }}</button>
</span>
<button type="button" class="btn btn-sm btn-success pull-right" ng-click="close()">{{ getText('close') }}</button>
</li>
</ul>
</script>
Вы хакаете с помощью css. Это сработало для меня.
.ui-datepicker .btn-group .btn-danger.btn{
display: none;
}
В дополнение к решению Роба Дж., если мы добавим ng-class={"require": "vm.required"} к родительскому div ввода datepicker или просто добавим класс с именем require в div. Затем используйте волшебный css, чтобы скрыть или показать кнопку очистки в зависимости от значения vm.required:
.require button[ng-click^="select(null)"] {
display: none;
}
если вы хотите удалить кнопку очистки, это означает, что поле является обязательным, и, поскольку я не согласен с форсированием вещей (например, созданием родительского div и классов ввода), просто установите элемент, для которого вы активируете средство выбора даты, как требуется
[uib-datepicker-popup][required] + [uib-datepicker-popup-wrap] button[ng-click*="select(null"] {
display: none;
}<input type="text" ng-model="datePicker.date" uib-datepicker-popup="dd MMM yyyy" readonly is-open="datePicker.opened" ng-click="datePicker.opened = true" required />Вы можете сделать этот трюк css, чтобы скрыть кнопку очистки:
.uib-button-bar > .btn-group > .btn-danger {
display: none !important;
}
Вы можете скрыть это, добавив в style.css следующее:
.uib-clear {
display: none;
}
