DateRangeComponent Documentation

Props

Prop	Type	Default	Required	Description
value	Object	{ startDate: "", endDate: "", dateType: "today", isBS: false, yearType: "" }	No	The v-model binding object containing date range configuration
searchOnLoad	Boolean	false	No	Whether to automatically trigger the search event when component mounts
enableYear	Boolean	false	No	Whether to show the year selector dropdown for fiscal year selection

Value Object Properties

Property	Type	Description	Format
startDate	String	Start date of the range	YYYY-MM-DD (always in AD)
endDate	String	End date of the range	YYYY-MM-DD (always in AD)
dateType	String	Currently selected date type option ID	See Date Type Options
isBS	Boolean	Whether Nepali calendar (BS) is currently active	true or false
yearType	String	Selected fiscal year (only relevant when enableYear is true)	Fiscal year in YYYY format

Events

Event	Payload	Trigger	Description
@input	Updated value object	Any value change	Standard v-model event emitted when component state changes
@search	Current value object	Search button click or predefined date type selection	Emitted when user initiates search or selects a predefined date range

Event Payload Structure

Both events emit the same payload structure:

{
  startDate: "2024-01-01",    // String: Start date in AD format
  endDate: "2024-01-31",      // String: End date in AD format  
  dateType: "month_to_date",  // String: Selected date type ID
  isBS: false,                // Boolean: Calendar system flag
  yearType: "2081"            // String: Selected fiscal year (when enableYear is true)
}

Date Type Options

The component provides the following predefined date range options (all calculations are based on BS/Nepali fiscal year):

Option	ID	Description
Year to date	year_to_date	From fiscal year start to today
Quarter to date	quarter_to_date	From current quarter start to today
Month to date	month_to_date	From month start to today
Week to date	week_to_date	From week start to today
Today	today	Current date only
Last 30 days	last_30_days	Previous 30 days from today
Last 90 days	last_90_days	Previous 90 days from today
First quarter (Q1)	first_quarter	Full Q1 of fiscal year (respects yearType when enableYear is true)
Second quarter (Q2)	second_quarter	Full Q2 of fiscal year (respects yearType when enableYear is true)
Third quarter (Q3)	third_quarter	Full Q3 of fiscal year (respects yearType when enableYear is true)
Fourth quarter (Q4)	fourth_quarter	Full Q4 of fiscal year (respects yearType when enableYear is true)
Custom	custom	Manual date selection (automatically set when user picks dates manually)

Year Selection Feature

When enableYear prop is set to true, the component displays an additional dropdown for fiscal year selection:

• Year Range: Shows 9 fiscal years (4 years before current, current year, and 4 years after)
• Display Format: Shows fiscal years in YY/YY format (e.g., "80/81" for 2080/2081)
• Default Selection: Defaults to current fiscal year
• Quarter Integration: When a fiscal year is selected, quarterly options (Q1-Q4) use the selected year instead of current year
• Storage Behavior: When enableYear is true, localStorage persistence is disabled to prevent conflicts

Year Type Options Format

The year dropdown is populated with fiscal year options in the following format:

{
  title: "80/81",    // Display format: last 2 digits of start/end year
  id: 2080           // Actual fiscal year start year
}

Local Storage Persistence

The component automatically saves user preferences to localStorage under the key dateRangeComponentValue. This includes:

• Selected date range
• Calendar system preference (AD/BS)
• Date type selection

Note: Local storage persistence is disabled when enableYear prop is true to prevent conflicts with year-specific data.

On component initialization, it will restore previous settings if available, with the following priority:

1. Explicitly passed props
2. localStorage saved values (only when enableYear is false)
3. Default values

Validation Features

• Date Range Validation: Prevents start date from being greater than end date
• Error Notifications: Shows toast notifications for validation errors (requires $toastr to be available)

Calendar System Toggle

• Bootstrap Switch: Uses Bootstrap Switch for AD/BS toggle
• Automatic Conversion: Seamlessly converts dates between calendar systems
• Visual Labels: Shows "AD" and "BS" labels on the toggle switch

Basic Usage

<template>
  <DateRangeComponent
    v-model="dateRange"
    :searchOnLoad="true"
    @search="handleSearch"
  />
</template>

<script>
import DateRangeComponent from './DateRangeComponent.vue'

export default {
  components: {
    DateRangeComponent
  },
  data() {
    return {
      // Component will use localStorage or defaults if properties are empty
      dateRange: {
        startDate: "",        // Optional: Will use today's date if not provided
        endDate: "",          // Optional: Will use today's date if not provided
        dateType: "",         // Optional: Will default to "today"
        isBS: undefined       // Optional: Will default to false
      }
    }
  },
  methods: {
    handleSearch(dateRangeData) {
      console.log('Search triggered:', dateRangeData)
      // dateRangeData contains: { startDate, endDate, dateType, isBS }
      // All dates are in AD format regardless of display calendar
      
      // Perform your search/filter operations here
      this.fetchData(dateRangeData.startDate, dateRangeData.endDate)
    }
  }
}
</script>

Usage with Year Selection

<template>
  <DateRangeComponent
    v-model="dateRange"
    :enableYear="true"
    :searchOnLoad="false"
    @search="handleSearch"
    @input="handleDateChange"
  />
</template>

<script>
export default {
  data() {
    return {
      dateRange: {
        startDate: "",
        endDate: "",
        dateType: "first_quarter",
        isBS: false,
        yearType: "2081"          // Specific fiscal year
      }
    }
  },
  methods: {
    handleSearch(data) {
      console.log('Searching with range and year:', data)
      // data will include yearType when enableYear is true
    },
    handleDateChange(data) {
      console.log('Date range updated:', data)
      // Real-time updates including year changes
    }
  }
}
</script>

Advanced Usage with Initial Values

<template>
  <DateRangeComponent
    v-model="dateRange"
    :searchOnLoad="false"
    @search="handleSearch"
    @input="handleDateChange"
  />
</template>

<script>
export default {
  data() {
    return {
      dateRange: {
        startDate: "2024-01-01",      // Specific start date
        endDate: "2024-03-31",        // Specific end date
        dateType: "first_quarter",    // Preset to Q1
        isBS: true                    // Start with Nepali calendar
      }
    }
  },
  methods: {
    handleSearch(data) {
      // Handle search operations
      console.log('Searching with range:', data)
    },
    handleDateChange(data) {
      // Handle any date range changes (real-time updates)
      console.log('Date range updated:', data)
    }
  }
}
</script>

Important Notes

• Props Date: The date always need to be passed in AD format all the nepali calculation are done inside the component itself
• Date Format Consistency: All dates are internally stored and emitted in AD format (YYYY-MM-DD) regardless of the display calendar system
• Fiscal Year Based: All predefined date ranges are calculated based on Nepali fiscal year (Shrawan to Ashar)
• Automatic Search: Search is automatically triggered when selecting predefined date types
• Custom Mode: Manually selecting dates automatically switches to "Custom" mode
• Persistence: User preferences are automatically saved and restored between sessions (disabled when enableYear is true)
• Validation: Built-in validation prevents invalid date ranges and shows user-friendly error messages
• Year Selection: When enableYear is true, quarterly date ranges respect the selected fiscal year instead of using current year
• Year Range: The year selector shows 9 fiscal years centered around the current year (4 before, current, 4 after)