https://github.com/SharifClick/svelte-touch-timepicker

A simple time picker - best for mobile web app (no dependency 🔥)
https://github.com/SharifClick/svelte-touch-timepicker

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/SharifClick/svelte-touch-timepicker
• Owner: SharifClick
• License: mit
• Created: 2020-01-09T13:02:42.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-05T03:30:04.000Z (about 2 years ago)
• Last Synced: 2024-11-10T12:12:57.458Z (3 months ago)
• Language: Svelte
• Homepage: https://sharifclick.github.io/svelte-touch-timepicker/
• Size: 253 KB
• Stars: 14
• Watchers: 3
• Forks: 3
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Native like time-picker for Svelte

 

[![NPM version](https://img.shields.io/npm/v/svelte-touch-timepicker.svg?style=flat)](https://www.npmjs.com/package/svelte-touch-timepicker) [![NPM downloads](https://img.shields.io/npm/dm/svelte-touch-timepicker.svg?style=flat)](https://www.npmjs.com/package/svelte-touch-timepicker)

[View the demo.](https://sharifclick.github.io/svelte-touch-timepicker/)

## Installation

```bash

npm i -D svelte-touch-timepicker

```

## Usage

```html

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

  let time = new Date();

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

  .container{

    height: 100%;

    width: 100%;

  }

  .center {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    font: 20px 'Roboto', sans-serif;

  }



  


    
Time: {_time}

    

  



```

## Default css custom properties

```css

  :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` |