BW DatePicker

import { BWDatePicker } from '@bw-ui/datepicker';
import '@bw-ui/datepicker/css';
const picker = new BWDatePicker('#date-input', {
  mode: 'popup',
  format: 'YYYY-MM-DD',
});

import { ThemingPlugin } from '@bw-ui/datepicker-theming';

picker.use(ThemingPlugin, {
  theme: 'dark',
  autoDetect: true,
  persist: true,
});

import { PositioningPlugin } from '@bw-ui/datepicker-positioning';

picker.use(PositioningPlugin, {
  placement: 'top',
  alignment: 'left',
  autoFlip: true,
  offset: { x: 0, y: 8 },
});

import { AccessibilityPlugin } from '@bw-ui/datepicker-accessibility';

picker.use(AccessibilityPlugin, {
  enableKeyboardNav: true,
  enableFocusTrap: true,
  enableAnnouncer: true,
});

import { LocalePlugin } from '@bw-ui/datepicker-locale';

picker.use(LocalePlugin, {
  locale: 'fr-FR',
  firstDayOfWeek: 1,
});

import { MobilePlugin } from '@bw-ui/datepicker-mobile';

picker.use(MobilePlugin, {
  enableTouch: true,
  enableSwipe: true,
  swipeThreshold: 50,
});

import { InputHandlerPlugin } from '@bw-ui/datepicker-input-handler';

picker.use(InputHandlerPlugin, {
  format: 'DD/MM/YYYY',
  enableMask: true,
  validateOnBlur: true,
});

import { DateUtilsPlugin } from '@bw-ui/datepicker-date-utils';

picker.use(DateUtilsPlugin);

const utils = picker.getPlugin('date-utils');
utils.calculator.addDays(new Date(), 7);

import { RangePlugin } from '@bw-ui/datepicker-range';

picker.use(RangePlugin, {
    presets: [
    'today',
    'last7days',
    'thisQuarter',
    ]
});

import { DualCalendarPlugin } from '@bw-ui/datepicker-dual-calendar';

picker.use(DualCalendarPlugin, {
  monthsToShow: 2,
  syncNavigation: true,
});

import { DataPlugin } from '@bw-ui/datepicker-data';

picker.use(DataPlugin, {
  loader: async (month, year) => {
    const res = await fetch(`/api/events?m=${month}&y=${year}`);
    return res.json();
  },
  showBadges: true,
});

import { BWDatePicker } from '@bw-ui/datepicker';
import { ThemingPlugin } from '@bw-ui/datepicker-theming';
import { PositioningPlugin } from '@bw-ui/datepicker-positioning';
import { AccessibilityPlugin } from '@bw-ui/datepicker-accessibility';

const picker = new BWDatePicker('#date')
  .use(ThemingPlugin, { theme: 'dark' })
  .use(PositioningPlugin, { autoFlip: true })
  .use(AccessibilityPlugin);

new BWDatePicker('#calendar', {
  mode: 'inline',
});

new BWDatePicker('#date', {
  mode: 'modal',
});

import { MultiDatePlugin } from '@bw-ui/datepicker-multidate';

new BWDatePicker('#date')
  .use(MultiDatePlugin, {
    maxDates: 2,
    minDates: 2,
    format: 'MM.DD.YYYY',
    separator: ' | ',
    showClearButton: true,
    showCountBadge: true,
  });