Angular dategangepicker несколько кнопок

Я использовал угловой порт daterangepicker оригинальная библиотека js Используемый порт: Посмотреть здесь

у меня несколько раз отображаются предопределенные кнопки: Angular dategangepicker несколько кнопок

мой код основан на следующем примере песочницы: Здесь диапазоны отображаются правильно.

Вот мой фрагмент кода для HTML-шаблона:

<div class = "datepicker form-group">
<div class = "input-group"
    name = "daterangeInput" 
    daterangepicker 
    [options] = "options"                                         
    (applyDaterangepicker) = "applyDate($event)"
>
    <span class = "form-control uneditable-input ">
            {{ daterange.label  }}
    </span>
    <span class = "input-group-btn">
        <a type = "button" class = "btn btn-default">
            <i class = "glyphicon glyphicon-calendar"></i>
        </a>
    </span>
</div>              

Параметры машинописного текста выглядят так:

public daterange: any = {
   start: moment().subtract(6, 'days'),
   end: moment(),
   label: 'Last 7 days'
};

@ViewChild(DaterangePickerComponent)
private picker: DaterangePickerComponent;

public options: any = {
   locale: { format: 'YYYY-MM-DD' },
   alwaysShowCalendars: false,
   ranges: {
       'Today': [moment(), moment()],
       'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
       'Last 7 Days': [moment().subtract(6, 'days'), moment()],
       'Last 30 Days': [moment().subtract(29, 'days'), moment()],
       'Last 90 Days': [moment().subtract(89, 'days'), moment()]
    }    
}

https://codesandbox.io/s/py4lr685mm

В чем твоя проблема?

PrathapG 26.10.2018 07:15

Он отлично работает с указанным URL-адресом codeandbox.

Shantanu 26.10.2018 07:22

Верно. @Shantanu. В моем случае ошибок в консоли нет. но указатель даты отображается как на изображении. Каждая кнопка полностью функциональна. У меня только 3 столбца кнопок. Любое предложение по тестированию / отладке высоко ценится

NBo 26.10.2018 07:28
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
3
144
2

Ответы 2

Кажется, мы не можем воспроизвести эту ошибку. В каком браузере вы это тестируете? Я заметил, что компоновка компонентов в Firefox отличается от таковой в Chrome и Edge, хотя и не нарушена.

Это полный HTML-код, который вы используете? Я заметил, что вам не хватает закрывающего DIV. Вы пробовали использовать компонент в чистой среде, чтобы гарантировать, что это не ошибка на вашей стороне?

На этом этапе, возможно, стоит подумать о том, чтобы не использовать эту библиотеку и / или открыть проблема на GitHub.

Да, окружающая среда очищена. Воспроизводится также в хроме. я скоро расширю html фрагмент

NBo 26.10.2018 08:11

хороший момент @Gordon Westerman [codeandbox.io/s/py4lr685mm] воспроизвел проблему в песочнице. проблема в плохой уценке

NBo 26.10.2018 08:16

Нашел проблему. При компиляции в окончательную кодовую базу возникло несколько тегов. Это вызывает проблему.

Другие вопросы по теме