Date Picker

The <DatePicker/> component has two exports:

1. The <DatePicker/> component, which takes an ISO date string in the form YYYY-MM-DD and returns a date string of the same form.
2. The getISODate() function, which takes a new Date() object and can be used to set the initial/default value of the <DatePicker/> component.

Example Usage

This is the value that is returned from this component (it is a string data type): 2024-11-21

<script lang="ts">
  import { DatePicker, getISODate } from "@fanny-pack-ui/svelte-kit";

  let date = getISODate(new Date());
  let dateIsValid = false;
</script>

<div class="date-wrapper">
  <DatePicker
    label="Date"
    bind:value={date}
    bind:isValid={dateIsValid}
    paddingV="10px"
    paddingH="20px"
    fontSize="24px"
    placeholder="YYYY-MM-DD"
    btnIcon="mdi:calendar"
    btnIconSize={30}
    disabled={false}
  />
  {#if !dateIsValid}
    <div class="invalid-error-wrapper">
      <span class="invalid-error-msg">Date Format: YYYY-MM-DD</span>
    </div>
  {/if}
</div>

<style>
  .date-wrapper {
    width: 350px;
    max-width: 100%;
    margin-bottom: 20px;
  }

  .invalid-error-wrapper {
    margin-top: 7px;
  }
    
  .invalid-error-msg {
    padding: 5px 10px;
    border-radius: 3px;
    background-color: var(--dark-red);
    color: var(--white);
    font-weight: bold;
  }
</style>

NOTES:

• Users can directly enter a date value into the input field or select a date from the calendar that pops up.
• If a user enters a date into the input field that does not match the YYYY-MM-DD format, then a validation error is triggered.
• If you want to set the initial/default value to today’s date, then use the getISODate() function that is exported along with this component and pass a new Date() object to it. See the example above for details.
  • Be careful about the date string that you pass to this component to give it an initial/default value.
  • The value that is returned from this component is a string in ISO date format. For example: 2024-11-21
  • You can pass an ISO date string to a new Date() constructor to create a Date object, like this: new Date("2023-09-13"). That will create a date object like this:
    Wed Sep 13 2023 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Keep in mind that the actual date that is returned from the new Date("YYYY-MM-DD") constructor will vary depending on your timezone. So passing an ISO date string to the new Date() constructor may not give you the result you are expecting. See JavaScript Date Formats for details.
• This <DatePicker/> component is designed to fill the entire width of its parent element. So, for example, you can put a wrapper <div> element around the <DatePicker/> component and put a width on the <div> and the <DatePicker/> component will be as wide as the <div> wrapper. See the example above.

Custom DatePicker Style Props

The original intention for these custom styles was to set --custom-date-picker-input-bg-color="transparent" so the <DatePicker> field would blend into the background. A few extra custom style rules have been provided for even more customizability.

You can set the following custom variables:

• --custom-date-picker-border-color
• --custom-date-picker-input-bg-color
• --custom-date-picker-input-text-color
• --custom-date-picker-input-placeholder-text-color
• --custom-date-picker-btn-bg-color
• --custom-date-picker-btn-icon-color
• --custom-date-picker-btn-separator-color

<DatePicker
  bind:value={date}
  bind:isValid={dateIsValid}
  placeholder="Enter a date"
  --custom-date-picker-border-color="var(--secondary-color)"
  --custom-date-picker-input-bg-color="var(--secondary-color)"
  --custom-date-picker-input-text-color="var(--white)"
  --custom-date-picker-input-placeholder-text-color="var(--neutral-4)"
  --custom-date-picker-btn-bg-color="var(--secondary-color)"
  --custom-date-picker-btn-icon-color="var(--white)"
  --custom-date-picker-btn-separator-color="var(--white)"
/>

Props