/svelte-touch-timepicker

A simple time picker - best for mobile web app (no dependency 🔥)

Primary LanguageSvelteMIT LicenseMIT

Native like time-picker for Svelte

NPM version NPM downloads

View the demo.

Installation

npm i -D svelte-touch-timepicker

Usage

<script>
  import TimePicker  from "svelte-touch-timepicker"; // 4.38kb gzipped

  let time = new Date();
  $: _time = time.toLocaleTimeString("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>Time: {_time}</p>
    <TimePicker bind:time />
  </div>
</div>

Default css custom properties

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

Props

Name Type Description Required Default
time object default date object yes new Date()
visible Boolean Popup visibility No false
classes String custom classes to be add on input No empty string