/svelte-touch-datepicker

A simple date picker (Wheel and touch) (no dependencies 🔥)

Primary LanguageSvelteMIT LicenseMIT

Native like date-picker for Svelte (With wheel control for desktop)

🚀See it in Action

Installation

npm i -D svelte-touch-datepicker

Usage

<script>
  import DatePicker  from "svelte-touch-datepicker";

  let date = new Date();
  $: _date = date.toLocaleDateString("en-US");

</script>

<style>

  .container{
    height: 100%;
    width: 100%;
  }

  .center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font: 20px 'Roboto', sans-serif;
  }
</style>

<div class="container" >
  <div class="center">
    <p>Date: {_date}</p>
    <DatePicker bind:date />
  </div>
</div>

Custom events

<script>
  function callback(event) {
    // you will find the `date` object in event.detail
  }
</script>

<DatePicker
  on:dateChange={callback}
  on:confirmDate={callback2}
/>

Default css custom properties

  :root{
    --svtd-popup-bg-color: white;
    --svtd-popup-color: black;
    --svtd-popup-radius: 10px;
    --svtd-font-size: 20px;
    --svtd-button-color: black;
    --svtd-button-bg-color: transparent;
    --svtd-border: 1px solid grey;
    --svtd-button-box-shadow: none;
    --svtd-bar-color: grey;
  }

Props

Name Type Description Required Default
date object default date object yes new Date()
visible Boolean Popup visibility No false
years_map Array Years map [from, to] No [1900, 2100]
classes String custom classes to be add on input No empty string