tessl/npm-buefy

Lightweight UI components for Vue.js (v3) based on Bulma

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Date & Time Components

Name: tessl/npm-buefy
Author: tessl

Specialized input components for date, time, and datetime selection with internationalization and mobile support.

Datepicker Component

Date selection component with calendar interface and various display modes.

export const BDatepicker: Component<{
  modelValue?: Date | Date[];
  dayNames?: string[];
  monthNames?: string[];
  firstDayOfWeek?: number;
  inline?: boolean;
  openOnFocus?: boolean;
  type?: 'month';
  dateFormatter?: (date: Date) => string;
  dateParser?: (dateString: string) => Date;
  dateCreator?: () => Date;
  mobileNative?: boolean;
  position?: 'is-top-right' | 'is-top-left' | 'is-bottom-left';
  iconRight?: string;
  iconRightClickable?: boolean;
  iconPack?: string;
  size?: 'is-small' | 'is-medium' | 'is-large';
  placeholder?: string;
  editable?: boolean;
  disabled?: boolean;
  readonly?: boolean;
  loading?: boolean;
  expanded?: boolean;
  closeOnClick?: boolean;
  range?: boolean;
  multiple?: boolean;
  rulesForFirstWeek?: number;
  minDate?: Date;
  maxDate?: Date;
  focusedDate?: Date;
  selectableDates?: Date[] | ((date: Date) => boolean);
  unselectableDates?: Date[] | ((date: Date) => boolean);
  unselectableDaysOfWeek?: number[];
  showWeekNumber?: boolean;
  weekNumberClickable?: boolean;
  mobileModal?: boolean;
  appendToBody?: boolean;
  ariaNextLabel?: string;
  ariaPreviousLabel?: string;
  trapFocus?: boolean;
  autoFocus?: boolean;
  nearbyMonthDays?: boolean;
  nearbySelectableMonthDays?: boolean;
  showNearbyMonthDays?: boolean;
  indicators?: string;
  yearsRange?: number[];
  resetOnMeridianChange?: boolean;
}>;

Usage example:

import { BDatepicker } from "buefy";

// Basic datepicker
<BDatepicker 
  v-model="selectedDate" 
  placeholder="Select date"
  :icon-right="calendar"
/>

// Date range picker
<BDatepicker 
  v-model="dateRange" 
  :range="true"
  placeholder="Select date range"
/>

// Inline calendar
<BDatepicker 
  v-model="selectedDate" 
  :inline="true"
  :show-week-number="true"
/>

// With restrictions
<BDatepicker 
  v-model="selectedDate"
  :min-date="minDate"
  :max-date="maxDate"
  :unselectable-days-of-week="[0, 6]"
/>

Timepicker Component

Time selection component with hour, minute, and optional second inputs.

export const BTimepicker: Component<{
  modelValue?: Date;
  inline?: boolean;
  openOnFocus?: boolean;
  timeFormatter?: (date: Date) => string;
  timeParser?: (timeString: string) => Date;
  mobileNative?: boolean;
  position?: 'is-top-right' | 'is-top-left' | 'is-bottom-left';
  iconRight?: string;
  iconRightClickable?: boolean;
  iconPack?: string;
  size?: 'is-small' | 'is-medium' | 'is-large';
  placeholder?: string;
  editable?: boolean;
  disabled?: boolean;
  readonly?: boolean;
  loading?: boolean;
  expanded?: boolean;
  hourFormat?: '12' | '24';
  incrementHours?: number;
  incrementMinutes?: number;
  incrementSeconds?: number;
  minTime?: Date;
  maxTime?: Date;
  enableSeconds?: boolean;
  hoursLabel?: string;
  minutesLabel?: string;
  secondsLabel?: string;
  timeCreator?: (defaultTime: Date) => Date;
  appendToBody?: boolean;
  resetOnMeridianChange?: boolean;
  unselectableTimes?: Date[] | ((date: Date) => boolean);
}>;

Usage example:

import { BTimepicker } from "buefy";

// Basic timepicker
<BTimepicker 
  v-model="selectedTime" 
  placeholder="Select time"
  icon-right="clock"
/>

// 12-hour format with seconds
<BTimepicker 
  v-model="selectedTime"
  hour-format="12"
  :enable-seconds="true"
  hours-label="hr"
  minutes-label="min"
  seconds-label="sec"
/>

// Inline time selector
<BTimepicker 
  v-model="selectedTime" 
  :inline="true"
  :increment-minutes="15"
/>

Datetimepicker Component

Combined date and time selection component.

export const BDatetimepicker: Component<{
  modelValue?: Date;
  editable?: boolean;
  placeholder?: string;
  disabled?: boolean;
  size?: 'is-small' | 'is-medium' | 'is-large';
  iconRight?: string;
  iconRightClickable?: boolean;
  iconPack?: string;
  openOnFocus?: boolean;
  position?: 'is-top-right' | 'is-top-left' | 'is-bottom-left';
  mobileNative?: boolean;
  minDatetime?: Date;
  maxDatetime?: Date;
  datetimeFormatter?: (date: Date) => string;
  datetimeParser?: (dateString: string) => Date;
  datetimeCreator?: (defaultDatetime: Date) => Date;
  datepicker?: object;
  timepicker?: object;
  appendToBody?: boolean;
}>;

Usage example:

import { BDatetimepicker } from "buefy";

// Basic datetime picker
<BDatetimepicker 
  v-model="selectedDatetime" 
  placeholder="Select date and time"
/>

// With custom formatting
<BDatetimepicker 
  v-model="selectedDatetime"
  :datetime-formatter="formatDateTime"
  :datetime-parser="parseDateTime"
/>

// With separate datepicker and timepicker options
<BDatetimepicker 
  v-model="selectedDatetime"
  :datepicker="{ 
    showWeekNumber: true,
    firstDayOfWeek: 1 
  }"
  :timepicker="{ 
    enableSeconds: true,
    hourFormat: '24' 
  }"
/>

Clockpicker Component

Visual clock interface for time selection.

export const BClockpicker: Component<{
  modelValue?: Date;
  locale?: string | string[];
  inline?: boolean;
  openOnFocus?: boolean;
  position?: 'is-top-right' | 'is-top-left' | 'is-bottom-left';
  mobileNative?: boolean;
  iconRight?: string;
  iconRightClickable?: boolean;
  iconPack?: string;
  size?: 'is-small' | 'is-medium' | 'is-large';
  placeholder?: string;
  editable?: boolean;
  disabled?: boolean;
  readonly?: boolean;
  loading?: boolean;
  expanded?: boolean;
  hourFormat?: '12' | '24';
  incrementMinutes?: number;
  autoSwitch?: boolean;
  type?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' | 
         'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
  hoursLabel?: string;
  minutesLabel?: string;
  timeCreator?: (defaultTime: Date) => Date;
  appendToBody?: boolean;
  resetOnMeridianChange?: boolean;
  unselectableTimes?: Date[] | ((date: Date) => boolean);
}>;

Usage example:

import { BClockpicker } from "buefy";

// Basic clockpicker
<BClockpicker 
  v-model="selectedTime" 
  placeholder="Select time"
/>

// Inline clock
<BClockpicker 
  v-model="selectedTime" 
  :inline="true"
  type="is-primary"
  :auto-switch="false"
/>

// 12-hour format
<BClockpicker 
  v-model="selectedTime"
  hour-format="12"
  hours-label="Hour"
  minutes-label="Minute"
/>

Internationalization

Date and time components support full internationalization:

// Configure global date/time formatting
app.use(Buefy, {
  defaultDateFormatter: (date) => {
    return date.toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    });
  },
  defaultDateParser: (dateString) => {
    return new Date(dateString);
  },
  defaultTimeFormatter: (date) => {
    return date.toLocaleTimeString('en-US', {
      hour: '2-digit',
      minute: '2-digit'
    });
  },
  defaultTimeParser: (timeString) => {
    const [hours, minutes] = timeString.split(':');
    const date = new Date();
    date.setHours(parseInt(hours), parseInt(minutes), 0, 0);
    return date;
  }
});

// Custom day and month names
<BDatepicker 
  v-model="date"
  :day-names="['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb']"
  :month-names="[
    'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
    'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
  ]"
  :first-day-of-week="1"
/>

Mobile Support

All datetime components provide native mobile interfaces:

// Enable native mobile date/time inputs
<BDatepicker 
  v-model="date" 
  :mobile-native="true" 
/>

<BTimepicker 
  v-model="time" 
  :mobile-native="true" 
/>

<BDatetimepicker 
  v-model="datetime" 
  :mobile-native="true" 
/>

Validation Integration

Date and time components work with form validation:

// With validation
<BField 
  label="Event Date" 
  :type="errors.date ? 'is-danger' : ''"
  :message="errors.date"
>
  <BDatepicker 
    v-model="eventDate"
    :min-date="new Date()"
    placeholder="Select event date"
    @input="validateDate"
  />
</BField>

Install with Tessl CLI