DateTimeRangePicker - added the option to disable it and to disable the weekends

Author: marcus-wishes

library/src/components/DateTimeRange.tsx

@@ -13,6 +13,10 @@ export interface DateTimeRangeProps {
 	endDate?: string
 	locale: string
 	weekStartDate: WeekDay
+	disableWeekend?: boolean
+
+	disabled?: boolean
+
 	onChange: (start: string, end: string) => void
 	onCollision: (dateString: string) => void
 }
@@ -51,6 +55,15 @@ function checkCollisions(to: Dayjs, disabledDates: Dayjs[]) {
 	return intersection
 }
 
+function weekendFilter(date: string) {
+	const dayOfWeek = dayjs(date).day()
+	return dayOfWeek === 0 || dayOfWeek === 6
+}
+
+function allDisabledFilter(date: string) {
+	return true
+}
+
 export const DateTimeRange: FC<DateTimeRangeProps> = ({ ...props }) => {
 	const [startDate, setStartDate] = useState(
 		props.startDate ? dayjs(props.startDate) : undefined,
@@ -97,6 +110,13 @@ export const DateTimeRange: FC<DateTimeRangeProps> = ({ ...props }) => {
 			disabled={props.disabledDates}
 			previouslySelected={[]}
 			selected={selectedDates}
+			disabledDateFilter={
+				props.disabled
+					? allDisabledFilter
+					: props.disableWeekend
+					? weekendFilter
+					: undefined
+			}
 			onSelect={(event) => {
 				const selectedDate = event.iso
 				onDateSelect(selectedDate)

package-lock.json

@@ -424,32 +424,76 @@ function DateTimePickerShowcase ( props: ShowcaseProps ) {
 }
 
 export default DateTimePickerShowcase;
-import React from "react";
-import ShowcaseWrapperItem, { ShowcaseProps } from "../../ShowCaseWrapperItem/ShowcaseWrapperItem";
+import React, { useState } from "react"
+import ShowcaseWrapperItem, {
+	ShowcaseProps,
+} from "../../ShowCaseWrapperItem/ShowcaseWrapperItem"
 import { DateTimeRange } from "@linked-planet/ui-kit-ts"
-import dayjs from "dayjs";
-
-function DateTimeRangePickerShowcase ( props: ShowcaseProps ) {
+import dayjs from "dayjs"
 
+function DateTimeRangePickerShowcase(props: ShowcaseProps) {
 	// region: datetime-range-picker
-	const today = dayjs().format( "yyyy-MM-DD" )
-	const todayPlus2 = dayjs().add( 2, "day" ).format( "yyyy-MM-DD" )
-	const todayPlus10 = dayjs().add( 10, "day" ).format( "yyyy-MM-DD" )
+	const today = dayjs().format("YYYY-MM-DD")
+	const todayPlus2 = dayjs().add(2, "day").format("YYYY-MM-DD")
+	const todayPlus10 = dayjs().add(10, "day").format("YYYY-MM-DD")
+
+	const [startDate, setStartDate] = useState<string>()
+	const [endDate, setEndDate] = useState<string>()
+	const [weekendDisabled, setWeekendDisabled] = useState(false)
+	const [disabled, setDisabled] = useState(false)
+
 	const example = (
-		<div style={ { minWidth: 300 } }>
+		<div style={{ minWidth: 300 }}>
+			<div
+				style={{
+					display: "grid",
+					gridTemplateColumns: "1fr 1fr",
+				}}
+			>
+				<div>Start Date: {startDate}</div>
+				<div>End Date: {endDate}</div>
+				<label htmlFor="disableWeekends">
+					Disable Weekends
+					<input
+						id="disableWeekends"
+						type="checkbox"
+						onChange={(e) => {
+							if (e.target.checked) {
+								setWeekendDisabled(true)
+							} else {
+								setWeekendDisabled(false)
+							}
+						}}
+					/>
+				</label>
+				<label htmlFor="disableAll">
+					Disabled
+					<input
+						id="disableAll"
+						type="checkbox"
+						onChange={(e) => {
+							if (e.target.checked) {
+								setDisabled(true)
+							} else {
+								setDisabled(false)
+							}
+						}}
+					/>
+				</label>
+			</div>
 			<DateTimeRange
-				minDate={ today }
-				maxDate={ todayPlus10 }
-				disabledDates={ [ todayPlus2 ] }
-				locale="de-de"
-				onCollision={ () =>
-					console.info( "Collision detected" )
-				}
-				onChange={ ( start: string, end: string ) => {
-					console.info( "Selected Range: ", start, end )
-				}
-				}
-				weekStartDate={ 0 }
+				minDate={today}
+				maxDate={todayPlus10}
+				disabledDates={[todayPlus2]}
+				locale="de-DE"
+				onCollision={() => console.info("Collision detected")}
+				onChange={(start: string, end: string) => {
+					setStartDate(start)
+					setEndDate(end)
+				}}
+				startDate={startDate}
+				endDate={endDate}
+				weekStartDate={0}
 			/>
 		</div>
 	)
@@ -459,25 +503,20 @@ function DateTimeRangePickerShowcase ( props: ShowcaseProps ) {
 		<ShowcaseWrapperItem
 			name="Date time Range picker"
 			sourceCodeExampleId="datetime-range-picker"
-			overallSourceCode={ props.overallSourceCode }
-			packages={ [
+			overallSourceCode={props.overallSourceCode}
+			packages={[
 				{
 					name: "@atlaskit/datetime-picker",
-					url: "https://atlassian.design/components/datetime-picker/examples"
-				}
-			] }
-
-			examples={
-				[
-					( example ),
-				]
-			}
+					url: "https://atlassian.design/components/datetime-picker/examples",
+				},
+			]}
+			examples={[example]}
 		/>
 	)
-
 }
 
-export default DateTimeRangePickerShowcase;
+export default DateTimeRangePickerShowcase
+
 import React from "react";
 import ShowcaseWrapperItem, { ShowcaseProps } from "../../ShowCaseWrapperItem/ShowcaseWrapperItem";
 import DropdownMenu, { DropdownItemCheckbox, DropdownItemGroup, DropdownItem } from "@atlaskit/dropdown-menu"

showcase/public/showcase-sources.txt

@@ -13,12 +13,47 @@ function DateTimeRangePickerShowcase(props: ShowcaseProps) {
 
 	const [startDate, setStartDate] = useState<string>()
 	const [endDate, setEndDate] = useState<string>()
+	const [weekendDisabled, setWeekendDisabled] = useState(false)
+	const [disabled, setDisabled] = useState(false)
 
 	const example = (
 		<div style={{ minWidth: 300 }}>
-			<div>
+			<div
+				style={{
+					display: "grid",
+					gridTemplateColumns: "1fr 1fr",
+				}}
+			>
 				<div>Start Date: {startDate}</div>
 				<div>End Date: {endDate}</div>
+				<label htmlFor="disableWeekends">
+					Disable Weekends
+					<input
+						id="disableWeekends"
+						type="checkbox"
+						onChange={(e) => {
+							if (e.target.checked) {
+								setWeekendDisabled(true)
+							} else {
+								setWeekendDisabled(false)
+							}
+						}}
+					/>
+				</label>
+				<label htmlFor="disableAll">
+					Disabled
+					<input
+						id="disableAll"
+						type="checkbox"
+						onChange={(e) => {
+							if (e.target.checked) {
+								setDisabled(true)
+							} else {
+								setDisabled(false)
+							}
+						}}
+					/>
+				</label>
 			</div>
 			<DateTimeRange
 				minDate={today}
@@ -32,7 +67,9 @@ function DateTimeRangePickerShowcase(props: ShowcaseProps) {
 				}}
 				startDate={startDate}
 				endDate={endDate}
-				weekStartDate={0}
+				weekStartDate={1}
+				disableWeekend={weekendDisabled}
+				disabled={disabled}
 			/>
 		</div>
 	)