Date Picker

import { DatePicker, DatePickerWrapper, Label } from "@medway-ui/core";
 
export default function DatePickerDemo() {
  return (
    <DatePickerWrapper>
      <Label htmlFor="date1">Birth Date</Label>
      <DatePicker id="date1" />
    </DatePickerWrapper>
  );
}

import { DatePicker, DatePickerWrapper, DatePickerLabel } from "@medway-ui/core";
 
export default function DatePickerFloating() {
  return (
    <DatePickerWrapper>
      <DatePickerLabel>Select Date</DatePickerLabel>
      <DatePicker placeholder="Select Date" />
    </DatePickerWrapper>
  );
}

import { DatePicker, DatePickerWrapper, DatePickerLabel } from "@medway-ui/core";
 
export default function DatePickerSmall() {
  return (
    <DatePickerWrapper>
      <DatePickerLabel>Birth Date</DatePickerLabel>
      <DatePicker size="md" placeholder="Select Date" />
    </DatePickerWrapper>
  );
}

import { DatePicker, DatePickerWrapper, DatePickerLabel, DatePickerText } from "@medway-ui/core";
 
export default function DatePickerSmallHelper() {
  return (
    <DatePickerWrapper>
      <DatePickerLabel>Appointment Date</DatePickerLabel>
      <DatePicker size="md" placeholder="Select date">
        <DatePickerText>Pick a date from the calendar</DatePickerText>
      </DatePicker>
    </DatePickerWrapper>
  );
}

import { DatePicker, DatePickerWrapper, DatePickerLabel, DatePickerText } from "@medway-ui/core";
 
export default function DatePickerSmallStates() {
  return (
    <div className="flex flex-col gap-6">
      <DatePickerWrapper>
        <DatePickerLabel>Birth Date</DatePickerLabel>
        <DatePicker size="md" placeholder="Select date">
          <DatePickerText>Optional field</DatePickerText>
        </DatePicker>
      </DatePickerWrapper>
 
      <DatePickerWrapper>
        <DatePickerLabel>Disabled date</DatePickerLabel>
        <DatePicker size="md" placeholder="Disabled" disabled>
          <DatePickerText>Field is disabled</DatePickerText>
        </DatePicker>
      </DatePickerWrapper>
 
      <DatePickerWrapper>
        <DatePickerLabel>Required date</DatePickerLabel>
        <DatePicker size="md" placeholder="Required" invalid>
          <DatePickerText>This field is required</DatePickerText>
        </DatePicker>
      </DatePickerWrapper>
    </div>
  );
}

import { DatePicker, DatePickerWrapper, DatePickerLabel } from "@medway-ui/core";
 
export default function DatePickerMinMax() {
  return (
    <DatePickerWrapper>
      <DatePickerLabel>Appointment Date</DatePickerLabel>
      <DatePicker
        min={new Date(new Date().getFullYear(), new Date().getMonth(), 5)}
        max={new Date(new Date().getFullYear(), new Date().getMonth(), 20)}
        placeholder="Appointment Date"
      />
    </DatePickerWrapper>
  );
}

import { DatePicker, DatePickerWrapper, DatePickerLabel } from "@medway-ui/core";
 
export default function DatePickerYearRange() {
  return (
    <DatePickerWrapper>
      <DatePickerLabel>Birth Date</DatePickerLabel>
      <DatePicker
        placeholder="Birth Date"
        yearRange={{ start: 1990, end: 2010 }}
      />
    </DatePickerWrapper>
  );
}

import { DatePicker, DatePickerWrapper, DatePickerLabel } from "@medway-ui/core";
 
export default function DatePickerNoYear() {
  return (
    <DatePickerWrapper>
      <DatePickerLabel>Appointment Date</DatePickerLabel>
      <DatePicker
        placeholder="Appointment Date"
        showYearSelector={false}
      />
    </DatePickerWrapper>
  );
}

import { DatePicker, DatePickerWrapper, DatePickerText, Label } from "@medway-ui/core";
 
export default function DatePickerHelper() {
  return (
    <DatePickerWrapper>
      <Label htmlFor="date-helper">Birth date</Label>
      <DatePicker id="date-helper">
        <DatePickerText>Pick a date from the calendar</DatePickerText>
      </DatePicker>
    </DatePickerWrapper>
  );
}

import { DatePicker, DatePickerWrapper, DatePickerLabel, DatePickerText } from "@medway-ui/core";
 
export default function DatePickerFloatingHelper() {
  return (
    <DatePickerWrapper>
      <DatePickerLabel>Birth date</DatePickerLabel>
      <DatePicker placeholder="Birth date">
        <DatePickerText>Pick a date from the calendar</DatePickerText>
      </DatePicker>
    </DatePickerWrapper>
  );
}

import { DatePicker, DatePickerWrapper, DatePickerText, Label } from "@medway-ui/core";
 
export default function DatePickerDisabled() {
  return (
    <DatePickerWrapper>
      <Label htmlFor="date-disabled">Disabled date</Label>
      <DatePicker id="date-disabled" disabled>
        <DatePickerText>Field is disabled</DatePickerText>
      </DatePicker>
    </DatePickerWrapper>
  );
}

import { DatePicker, DatePickerWrapper, DatePickerText, Label } from "@medway-ui/core";
 
export default function DatePickerInvalid() {
  return (
    <DatePickerWrapper>
      <Label htmlFor="date-invalid">Required date</Label>
      <DatePicker id="date-invalid" invalid>
        <DatePickerText>This field is required</DatePickerText>
      </DatePicker>
    </DatePickerWrapper>
  );
}

import { DateRangePicker, DatePickerWrapper, DatePickerLabel } from "@medway-ui/core";
 
export default function DateRangePickerDemo() {
  return (
    <DatePickerWrapper>
      <DatePickerLabel>Travel Dates</DatePickerLabel>
      <DateRangePicker placeholder="Travel Dates" />
    </DatePickerWrapper>
  );
}

import { DateRangePicker, DatePickerWrapper, DatePickerLabel } from "@medway-ui/core";
 
export default function DateRangePickerSmall() {
  return (
    <DatePickerWrapper>
      <DatePickerLabel>Travel Dates</DatePickerLabel>
      <DateRangePicker size="md" placeholder="Travel Dates" />
    </DatePickerWrapper>
  );
}

import { DateRangePicker, DatePickerWrapper, DatePickerLabel, DatePickerText } from "@medway-ui/core";
 
export default function DateRangePickerSmallHelper() {
  return (
    <DatePickerWrapper>
      <DatePickerLabel>Date range</DatePickerLabel>
      <DateRangePicker size="md" placeholder="Select date range">
        <DatePickerText>Select the desired date range</DatePickerText>
      </DateRangePicker>
    </DatePickerWrapper>
  );
}

import { DateRangePicker, DatePickerWrapper, DatePickerLabel, DatePickerText } from "@medway-ui/core";
 
export default function DateRangePickerSmallStates() {
  return (
    <div className="flex flex-col gap-6">
      <DatePickerWrapper>
        <DatePickerLabel>Disabled date range</DatePickerLabel>
        <DateRangePicker size="md" placeholder="Disabled" disabled>
          <DatePickerText>Field is disabled</DatePickerText>
        </DateRangePicker>
      </DatePickerWrapper>
 
      <DatePickerWrapper>
        <DatePickerLabel>Required date range</DatePickerLabel>
        <DateRangePicker size="md" placeholder="Required" invalid>
          <DatePickerText>This field is required</DatePickerText>
        </DateRangePicker>
      </DatePickerWrapper>
    </div>
  );
}

import { DateRangePicker, DatePickerWrapper, DatePickerText, Label } from "@medway-ui/core";
 
export default function DateRangePickerHelper() {
  return (
    <DatePickerWrapper>
      <Label htmlFor="range-helper">Date range</Label>
      <DateRangePicker id="range-helper" placeholder="Select date range">
        <DatePickerText>Select the desired date range</DatePickerText>
      </DateRangePicker>
    </DatePickerWrapper>
  );
}

import { DateRangePicker, DatePickerWrapper, DatePickerText, Label } from "@medway-ui/core";
 
export default function DateRangePickerDisabled() {
  return (
    <DatePickerWrapper>
      <Label htmlFor="range-disabled">Disabled date range</Label>
      <DateRangePicker id="range-disabled" disabled>
        <DatePickerText>Field is disabled</DatePickerText>
      </DateRangePicker>
    </DatePickerWrapper>
  );
}

import { DateRangePicker, DatePickerWrapper, DatePickerText, Label } from "@medway-ui/core";
 
export default function DateRangePickerInvalid() {
  return (
    <DatePickerWrapper>
      <Label htmlFor="range-invalid">Required date range</Label>
      <DateRangePicker id="range-invalid" invalid>
        <DatePickerText>This field is required</DatePickerText>
      </DateRangePicker>
    </DatePickerWrapper>
  );
}