BW DatePicker

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

const picker = new BWDatePicker('#date-input', {
  mode: 'inline',
  container: '#calendar-container'
}).use(ThemingPlugin, { theme: 'light' });

picker.on('date:changed', ({ date }) => {
  console.log('Selected:', date);
});

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

const picker = new BWDatePicker('#date-input', {
  mode: 'inline'
}).use(ThemingPlugin, { theme: 'dark' });

// Light theme
const lightPicker = new BWDatePicker('#light-input', {
  mode: 'inline'
}).use(ThemingPlugin, { theme: 'light' });

// Dark theme
const darkPicker = new BWDatePicker('#dark-input', {
  mode: 'inline'
}).use(ThemingPlugin, { theme: 'dark' });

const picker = new BWDatePicker('#date-input', {
  mode: 'inline',
  minDate: new Date(),  // Today onwards only
  maxDate: new Date('2026-12-31')
});

const picker = new BWDatePicker('#date-input', {
  mode: 'popup',  // Default mode
  closeOnSelect: true
});

picker.on('date:changed', ({ date }) => {
  console.log('Selected:', date);
});

import { useEffect, useRef } from 'react';
import { BWDatePicker } from '@bw-ui/datepicker';
import { ThemingPlugin } from '@bw-ui/datepicker-theming';
import { RangePlugin } from '@bw-ui/datepicker-range';
import '@bw-ui/datepicker/dist/bw-datepicker.min.css';
import '@bw-ui/datepicker-theming/dist/bw-theming.min.css';
import '@bw-ui/datepicker-range/dist/bw-range.min.css';

interface DatePickerProps {
  onChange?: (date: Date | null) => void;
  onRangeChange?: (start: Date, end: Date) => void;
  theme?: 'light' | 'dark';
  enableRange?: boolean;
  placeholder?: string;
}

export function DatePicker({
  onChange,
  onRangeChange,
  theme = 'light',
  enableRange = false,
  placeholder = 'Select date'
}: DatePickerProps) {
  const inputRef = useRef<HTMLInputElement>(null);
  const pickerRef = useRef<BWDatePicker | null>(null);

  useEffect(() => {
    if (!inputRef.current) return;

    // Initialize picker
    const picker = new BWDatePicker(inputRef.current, {
      mode: 'popup',
      format: 'YYYY-MM-DD'
    });

    // Apply plugins
    picker.use(ThemingPlugin, { theme });
    
    if (enableRange) {
      picker.use(RangePlugin, {
        presets: ['today', 'last7days', 'thisMonth']
      });
      picker.on('range:complete', (e) => {
        onRangeChange?.(e.startDate, e.endDate);
      });
    } else {
      picker.on('date:changed', (e) => {
        onChange?.(e.date);
      });
    }

    pickerRef.current = picker;

    // Cleanup on unmount
    return () => {
      picker.destroy();
    };
  }, [theme, enableRange]);

  return (
    <input
      ref={inputRef}
      type="text"
      placeholder={placeholder}
      className="bw-datepicker-input"
    />
  );
}

import { DatePicker } from './DatePicker';

function BookingForm() {
  const handleDateChange = (date: Date | null) => {
    console.log('Selected:', date);
  };

  const handleRangeChange = (start: Date, end: Date) => {
    console.log('Check-in:', start);
    console.log('Check-out:', end);
  };

  return (
    <div>
      {/* Single date picker */}
      <DatePicker
        onChange={handleDateChange}
        theme="light"
        placeholder="Pick a date"
      />

      {/* Range picker for bookings */}
      <DatePicker
        enableRange
        onRangeChange={handleRangeChange}
        theme="dark"
        placeholder="Select dates"
      />
    </div>
  );
}

<!-- BWDatePicker.vue -->
<template>
  <input
    ref="inputRef"
    type="text"
    :placeholder="placeholder"
    class="bw-datepicker-input"
  />
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue';
import { BWDatePicker } from '@bw-ui/datepicker';
import { ThemingPlugin } from '@bw-ui/datepicker-theming';
import { RangePlugin } from '@bw-ui/datepicker-range';
import '@bw-ui/datepicker/dist/bw-datepicker.min.css';
import '@bw-ui/datepicker-theming/dist/bw-theming.min.css';
import '@bw-ui/datepicker-range/dist/bw-range.min.css';

interface Props {
  theme?: 'light' | 'dark';
  enableRange?: boolean;
  placeholder?: string;
}

const props = withDefaults(defineProps<Props>(), {
  theme: 'light',
  enableRange: false,
  placeholder: 'Select date'
});

const emit = defineEmits<{
  change: [date: Date | null];
  rangeChange: [start: Date, end: Date];
}>();

const inputRef = ref<HTMLInputElement | null>(null);
let picker: BWDatePicker | null = null;

const initPicker = () => {
  if (!inputRef.value) return;

  picker = new BWDatePicker(inputRef.value, {
    mode: 'popup',
    format: 'YYYY-MM-DD'
  });

  picker.use(ThemingPlugin, { theme: props.theme });

  if (props.enableRange) {
    picker.use(RangePlugin, {
      presets: ['today', 'last7days', 'thisMonth']
    });
    picker.on('range:complete', (e) => {
      emit('rangeChange', e.startDate, e.endDate);
    });
  } else {
    picker.on('date:changed', (e) => {
      emit('change', e.date);
    });
  }
};

onMounted(() => {
  initPicker();
});

onUnmounted(() => {
  picker?.destroy();
});

// Re-initialize when theme changes
watch(() => props.theme, () => {
  picker?.destroy();
  initPicker();
});
</script>

<!-- BookingForm.vue -->
<template>
  <div class="booking-form">
    <!-- Single date picker -->
    <BWDatePicker
      @change="handleDateChange"
      theme="light"
      placeholder="Pick a date"
    />

    <!-- Range picker for bookings -->
    <BWDatePicker
      enable-range
      @range-change="handleRangeChange"
      theme="dark"
      placeholder="Select dates"
    />
  </div>
</template>

<script setup lang="ts">
import BWDatePicker from './BWDatePicker.vue';

const handleDateChange = (date: Date | null) => {
  console.log('Selected:', date);
};

const handleRangeChange = (start: Date, end: Date) => {
  console.log('Check-in:', start);
  console.log('Check-out:', end);
};
</script>