Skip to content
Switch branches/tags
Go to file
Cannot retrieve contributors at this time

Native like time-picker for Svelte

NPM version NPM downloads

View the demo.


npm i -D svelte-touch-timepicker


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

  let time = new Date();
  $: _time = time.toLocaleTimeString("en-US");



    height: 100%;
    width: 100%;

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

<div class="container" >
  <div class="center">
    <p>Time: {_time}</p>
    <TimePicker bind:time />

Default css custom properties

    --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;


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