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

A simple date picker (Wheel and touch) (no dependencies 🔥)
https://github.com/SharifClick/svelte-touch-datepicker

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/SharifClick/svelte-touch-datepicker
• Owner: SharifClick
• License: mit
• Created: 2019-10-23T14:42:15.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-04T17:25:33.000Z (about 2 years ago)
• Last Synced: 2024-11-09T22:43:54.654Z (3 months ago)
• Language: Svelte
• Homepage: https://sharifclick.github.io/svelte-touch-datepicker
• Size: 279 KB
• Stars: 38
• Watchers: 4
• Forks: 5
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

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



  

  

    

  

  



## 🚀[See it in Action](https://sharifclick.github.io/svelte-touch-datepicker/)

## Installation

```bash

npm i -D svelte-touch-datepicker

```

## Usage

```html

  import DatePicker  from "svelte-touch-datepicker";

  let date = new Date();

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

  .container{

    height: 100%;

    width: 100%;

  }

  .center {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

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

  }



  


    
Date: {_date}

    

  



```

## Custom events

```html

  function callback(event) {

    // you will find the `date` object in event.detail

  }

```

## Default css custom properties

```css

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