WeekStrip

WeekStrip is one week of days in a row, the compact date picker at the top of booking, schedule, habit and fitness screens. Tap a day to pick it; swipe or use the arrows for the next or previous week. The month and year most of the week falls in sit above it.

It's the Calendar's day cells in a single week, so it follows the design the same way and takes the same markedDates, minDate, maxDate, isDateDisabled, renderDay and styles.

import { WeekStrip } from '@elik56a/react-native-pickers';

Loading…

Platform

Props

weekdayFormat

<>
  <WeekStrip value={day} onChange={setDay} />
  <Text style={{ textAlign: 'center', color: '#6E685E' }}>{day.toDateString()}</Text>
</>

Try the props

Platform

firstDayOfWeek

weekdayFormat

showHeadershowWeekdaysenableSwipe

<WeekStrip
  value={day}
  onChange={setDay}
  firstDayOfWeek={0}
  weekdayFormat="short"
/>

Marked and disabled days

markedDates adds dots, a label or a disabled flag to days, keyed by YYYY-MM-DD (toDateKey), as on the calendar. minDate, maxDate and isDateDisabled disable days, and the arrows stop at the weeks holding minDate and maxDate.

Loading…

Platform

Props

weekdayFormat

<WeekStrip
  value={day}
  onChange={setDay}
  markedDates={CLASSES}
  minDate={today}
  isDateDisabled={(date) => date.getDay() === 0}
/>

Weeks

The first day of the week comes from locale (Sunday in the US, Monday in most of Europe), or set firstDayOfWeek: 0 for Sunday to 6 for Saturday. The strip opens on the week of value, or of today, or of initialWeek, and moves to a new value's week when you set one from outside.

onWeekChange fires with the first day of the week after an arrow or a swipe, to load that week's data:

<WeekStrip value={day} onChange={setDay} markedDates={marks} onWeekChange={(start) => loadWeek(start)} />

showHeader={false} hides the title and arrows, leaving the days and the swipe. formatTitle(weekStart, locale) changes the title.

Props

Prop	Type	Default	Description
value	Date | null	—	Selected day (controlled).
defaultValue	Date | null	—	Initial day when uncontrolled.
onChange	(date: Date) => void	—	Fires when a day is tapped.
initialWeek	Date	the selected day or today	A day in the week shown first.
onWeekChange	(weekStart: Date) => void	—	Fires with the first day of the week after paging.
firstDayOfWeek	0–6	from locale, else 0	0 = Sunday.
locale	string	device	Weekday and month names.
minDate / maxDate	Date	—	Days outside are disabled, and paging stops at their weeks.
isDateDisabled	(date: Date) => boolean	—	Disable a day.
markedDates	Record<string, MarkedDate>	—	Dots, labels or disabled days, keyed by YYYY-MM-DD.
showHeader	boolean	true	Show the month title and the week arrows.
formatTitle	(weekStart: Date, locale?: string) => string	the month of the week's middle day	Title text.
showWeekdays	boolean	true	Show the weekday names.
weekdayFormat	'short' | 'narrow'	from the design	Weekday names: Mon or M.
enableSwipe	boolean	true	Swipe left or right to change weeks.
renderDay	(state: DayState, theme: PickerTheme) => ReactNode	—	Fully custom day cell, as on the calendar.
renderArrow	(direction, disabled) => ReactNode	—	Custom arrows.
dayHeight	number	44	Day cell height.
style	StyleProp<ViewStyle>	—	Container style.
styles	SlotStyles<CalendarSlot>	—	The calendar slots.
theme	DeepPartial<PickerTheme>	—	Theme override.
design	'ios' | 'material' | 'web'	from PickersProvider	The look to follow, over the provider's: iOS, Material or web.
testID	string	—	Test ID.

Related

• DatePicker: a whole month
• MonthPicker: a month and year