WIP: Enabling a month-year only selector

src/Date/Calendar.tsx

@@ -1,6 +1,7 @@
 import { View } from 'react-native'
 import Swiper from './Swiper'
 import Month from './Month'
+import Year from './Year'
 import {
   areDatesOnSameDay,
   dateToUnix,
@@ -18,7 +19,7 @@ import { darkenBy, lightenBy, useLatest } from '../shared/utils'
 import { sharedStyles } from '../shared/styles'
 import { defaultStartYear, defaultEndYear } from './dateUtils'
 
-export type ModeType = 'single' | 'range' | 'multiple'
+export type ModeType = 'single' | 'range' | 'multiple' | 'month'
 
 export type ScrollModeType = 'horizontal' | 'vertical'
 
@@ -80,8 +81,14 @@ export interface CalendarMultiProps extends BaseCalendarProps {
   onChange: MultiChange
 }
 
+export interface CalendarMonthProps extends BaseCalendarProps {
+  mode: 'month'
+  date: CalendarDate
+  onChange: SingleChange
+}
+
 function Calendar(
-  props: CalendarSingleProps | CalendarRangeProps | CalendarMultiProps
+  props: CalendarSingleProps | CalendarRangeProps | CalendarMultiProps | CalendarMonthProps
 ) {
   const {
     locale,
@@ -128,7 +135,7 @@ function Calendar(
 
   const onPressDate = useCallback(
     (d: Date) => {
-      if (mode === 'single') {
+      if (mode === 'single' || mode === 'month') {
         ;(onChangeRef.current as SingleChange)({
           date: dateMode === 'start' ? d : getEndOfDay(d),
         })
@@ -174,48 +181,97 @@ function Calendar(
 
   return (
     <View style={sharedStyles.root}>
-      <Swiper
-        initialIndex={getInitialIndex(firstDate, startYear, endYear)}
-        selectedYear={selectedYear}
-        scrollMode={scrollMode}
-        startWeekOnMonday={startWeekOnMonday || false}
-        startYear={startYear}
-        endYear={endYear}
-        renderItem={({ index }) => (
-          <Month
-            locale={locale}
-            mode={mode}
-            key={index}
-            validRange={validRange}
-            index={index}
-            startDate={startDate}
-            endDate={endDate}
-            date={date}
-            dates={dates}
-            onPressYear={onPressYear}
-            selectingYear={selectingYear}
-            onPressDate={onPressDate}
-            scrollMode={scrollMode}
-            primaryColor={theme.colors.primary}
-            selectColor={selectColor}
-            roundness={theme.roundness}
-            disableWeekDays={disableWeekDays}
-            startWeekOnMonday={startWeekOnMonday || false}
-            startYear={startYear}
-            endYear={endYear}
-          />
-        )}
-        renderHeader={({ onPrev, onNext }) => (
-          <CalendarHeader
-            locale={locale}
-            onPrev={onPrev}
-            onNext={onNext}
-            scrollMode={scrollMode}
-            disableWeekDays={disableWeekDays}
-            startWeekOnMonday={startWeekOnMonday || false}
-          />
-        )}
-      />
+      {mode === 'month' ? (
+        <Swiper
+          initialIndex={getInitialIndex(firstDate, startYear, endYear)}
+          selectedYear={selectedYear}
+          scrollMode={scrollMode}
+          startWeekOnMonday={startWeekOnMonday || false}
+          yearOnly={true}
+          startYear={startYear}
+          endYear={endYear}
+          renderItem={({ index }) => (
+            <Year
+              locale={locale}
+              mode={mode}
+              key={index}
+              validRange={validRange}
+              index={index}
+              startDate={startDate}
+              endDate={endDate}
+              date={date}
+              dates={dates}
+              onPressYear={onPressYear}
+              selectingYear={selectingYear}
+              onPressDate={onPressDate}
+              scrollMode={scrollMode}
+              primaryColor={theme.colors.primary}
+              selectColor={selectColor}
+              roundness={theme.roundness}
+              disableWeekDays={disableWeekDays}
+              startWeekOnMonday={startWeekOnMonday || false}
+              startYear={startYear}
+              endYear={endYear}
+            />
+          )}
+          renderHeader={({ onPrev, onNext }) => (
+            <CalendarHeader
+              locale={locale}
+              onPrev={onPrev}
+              onNext={onNext}
+              scrollMode={scrollMode}
+              disableWeekDays={disableWeekDays}
+              startWeekOnMonday={startWeekOnMonday || false}
+              hideDays={true}
+            />
+          )}
+        />
+      ) : (
+        <Swiper
+          initialIndex={getInitialIndex(firstDate, startYear, endYear)}
+          selectedYear={selectedYear}
+          scrollMode={scrollMode}
+          startWeekOnMonday={startWeekOnMonday || false}
+          yearOnly={false}
+          startYear={startYear}
+          endYear={endYear}
+          renderItem={({ index }) => (
+            <Month
+              locale={locale}
+              mode={mode}
+              key={index}
+              validRange={validRange}
+              index={index}
+              startDate={startDate}
+              endDate={endDate}
+              date={date}
+              dates={dates}
+              onPressYear={onPressYear}
+              selectingYear={selectingYear}
+              onPressDate={onPressDate}
+              scrollMode={scrollMode}
+              primaryColor={theme.colors.primary}
+              selectColor={selectColor}
+              roundness={theme.roundness}
+              disableWeekDays={disableWeekDays}
+              startWeekOnMonday={startWeekOnMonday || false}
+              startYear={startYear}
+              endYear={endYear}
+            />
+          )}
+          renderHeader={({ onPrev, onNext }) => (
+            <CalendarHeader
+              locale={locale}
+              onPrev={onPrev}
+              onNext={onNext}
+              scrollMode={scrollMode}
+              disableWeekDays={disableWeekDays}
+              startWeekOnMonday={startWeekOnMonday || false}
+              hideDays={false}
+            />
+          )}
+        />
+      )}
       {scrollMode === 'horizontal' ? (
         <YearPicker
           selectedYear={selectedYear}

src/Date/CalendarHeader.tsx

@@ -27,6 +27,7 @@ function CalendarHeader({
   onPrev,
   onNext,
   disableWeekDays,
+  hideDays,
   locale,
   startWeekOnMonday,
 }: {
@@ -35,13 +36,14 @@ function CalendarHeader({
   onPrev: () => any
   onNext: () => any
   disableWeekDays?: DisableWeekDaysType
+  hideDays: boolean
   startWeekOnMonday: boolean
 }) {
   const isHorizontal = scrollMode === 'horizontal'
 
   const theme = useTheme()
 
-  return (
+  return isHorizontal || !hideDays ? (
     <View style={styles.datePickerHeader} pointerEvents={'box-none'}>
       {isHorizontal ? (
         <View style={styles.buttonContainer} pointerEvents={'box-none'}>
@@ -62,13 +64,15 @@ function CalendarHeader({
           </View>
         </View>
       ) : null}
-      <DayNames
-        disableWeekDays={disableWeekDays}
-        locale={locale}
-        startWeekOnMonday={startWeekOnMonday}
-      />
+      {hideDays ? null : (
+        <DayNames
+          disableWeekDays={disableWeekDays}
+          locale={locale}
+          startWeekOnMonday={startWeekOnMonday}
+        />
+      )}
     </View>
-  )
+  ) : null
 }
 
 const styles = StyleSheet.create({

src/Date/DatePickerInput.shared.tsx

@@ -23,6 +23,7 @@ export type DatePickerInputProps = {
   uppercase?: boolean
   startYear?: number
   endYear?: number
+  monthOnly?: boolean
   onChangeText?: (text: string | undefined) => void
   inputEnabled?: boolean
   disableStatusBarPadding?: boolean

src/Date/DatePickerInput.tsx

@@ -14,6 +14,7 @@ function DatePickerInput(
     disableCalendarIcon = false,
     animationType = Platform.select({ web: 'none', default: 'slide' }),
     presentationStyle = 'overFullScreen',
+    monthOnly = false,
     ...rest
   }: DatePickerInputProps,
   ref: any
@@ -37,6 +38,7 @@ function DatePickerInput(
   return (
     <DatePickerInputWithoutModal
       ref={ref}
+      monthOnly={monthOnly}
       {...rest}
       inputButton={
         withModal ? (
@@ -70,7 +72,7 @@ function DatePickerInput(
         withModal ? (
           <DatePickerModal
             date={value}
-            mode="single"
+            mode={monthOnly ? 'month' : 'single'}
             visible={visible}
             onDismiss={onDismiss}
             onConfirm={onInnerConfirm}

src/Date/DatePickerInputWithoutModal.tsx

@@ -25,6 +25,7 @@ function DatePickerInputWithoutModal(
     uppercase,
     startYear,
     endYear,
+    monthOnly = false,
     onChangeText,
     inputEnabled,
     disableStatusBarPadding,
@@ -41,6 +42,7 @@ function DatePickerInputWithoutModal(
       uppercase: DatePickerInputProps['uppercase']
       startYear: DatePickerInputProps['startYear']
       endYear: DatePickerInputProps['endYear']
+      monthOnly: DatePickerInputProps['monthOnly']
       inputEnabled: DatePickerInputProps['inputEnabled']
       disableStatusBarPadding: DatePickerInputProps['disableStatusBarPadding']
       startWeekOnMonday?: DatePickerInputProps['startWeekOnMonday']
@@ -50,6 +52,7 @@ function DatePickerInputWithoutModal(
   ref: any
 ) {
   const theme = useTheme()
+
   const {
     formattedValue,
     inputFormat,
@@ -60,6 +63,7 @@ function DatePickerInputWithoutModal(
     value,
     validRange,
     inputMode,
+    monthOnly,
     onChange,
     onValidationError,
   })
@@ -117,6 +121,7 @@ function DatePickerInputWithoutModal(
         uppercase,
         startYear,
         endYear,
+        monthOnly,
         inputEnabled,
         disableStatusBarPadding,
         startWeekOnMonday,

src/Date/DatePickerModal.tsx

@@ -8,6 +8,7 @@ import {
 } from 'react-native'
 import { useTheme } from 'react-native-paper'
 import DatePickerModalContent, {
+  DatePickerModalContentMonthProps,
   DatePickerModalContentMultiProps,
   DatePickerModalContentRangeProps,
   DatePickerModalContentSingleProps,
@@ -37,11 +38,16 @@ export interface DatePickerModalRangeProps
   extends DatePickerModalContentRangeProps,
     DatePickerModalProps {}
 
+export interface DatePickerModalMonthProps
+  extends DatePickerModalContentMonthProps,
+    DatePickerModalProps {}
+
 export function DatePickerModal(
   props:
     | DatePickerModalRangeProps
     | DatePickerModalSingleProps
     | DatePickerModalMultiProps
+    | DatePickerModalMonthProps
 ) {
   const {
     visible,

src/Date/DatePickerModalContent.tsx

@@ -72,11 +72,23 @@ export interface DatePickerModalContentMultiProps
   onConfirm: MultiConfirm
 }
 
+export interface DatePickerModalContentMonthProps
+  extends HeaderPickProps,
+    BaseCalendarProps,
+    DatePickerModalContentBaseProps {
+  mode: 'month'
+  date?: CalendarDate
+  onChange?: SingleChange
+  onConfirm: SingleChange
+  dateMode?: 'start' | 'end'
+}
+
 export function DatePickerModalContent(
   props:
     | DatePickerModalContentRangeProps
     | DatePickerModalContentSingleProps
     | DatePickerModalContentMultiProps
+    | DatePickerModalContentMonthProps
 ) {
   const {
     mode,
@@ -139,6 +151,10 @@ export function DatePickerModalContent(
       ;(onConfirm as DatePickerModalContentMultiProps['onConfirm'])({
         dates: state.dates || [],
       })
+    } else if (mode === 'month') {
+      ;(onConfirm as DatePickerModalContentMonthProps['onConfirm'])({
+        date: state.date,
+      })
     }
   }, [state, mode, onConfirm])