MonthPicker ​

Datepicker for selecting month and year format.

Billing statement
No month selected
Reporting period
vue
<script setup lang="ts">
import { ref } from 'vue'
import { MonthPicker } from 'frappe-ui'

// Reviewing a billing statement — month + year is all you need
const statementMonth = ref('')
const reportPeriod = ref('')
</script>

<template>
  <div class="grid w-full max-w-xl grid-cols-1 gap-6 sm:grid-cols-2">
    <div class="flex flex-col gap-1.5">
      <span class="text-sm text-ink-gray-7">Billing statement</span>
      <MonthPicker
        v-model="statementMonth"
        placeholder="Pick a month"
      />
      <span class="text-xs text-ink-gray-5">
        {{ statementMonth ? `Showing ${statementMonth}` : 'No month selected' }}
      </span>
    </div>

    <div class="flex flex-col gap-1.5">
      <span class="text-sm text-ink-gray-7">Reporting period</span>
      <MonthPicker
        v-model="reportPeriod"
        placeholder="Fiscal month"
      />
    </div>
  </div>
</template>

API Reference ​

Show types
typescript
export interface MonthPickerProps {
	/** Placeholder text shown when no value is selected */
  placeholder?: string;

	/** Disables the month picker */
	disabled?: boolean;
}
placeholder
= "Select month"
string

Placeholder text shown when no value is selected

disabled
boolean

Disables the month picker

modelValue
= ""
String
update:modelValue
[value: String]

Fired when the model value changes.

ListViewMultiSelect