https://github.com/raheemcodes/date-picker

A TypeScript Web Component Date Picker
https://github.com/raheemcodes/date-picker

css html5 javascript typescript webcomponents

Last synced: about 1 month ago
JSON representation

A TypeScript Web Component Date Picker

• Host: GitHub
• URL: https://github.com/raheemcodes/date-picker
• Owner: Raheemcodes
• Created: 2022-09-11T19:21:16.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-02-26T21:43:28.000Z (almost 2 years ago)
• Last Synced: 2024-11-19T21:39:08.040Z (about 1 month ago)
• Topics: css, html5, javascript, typescript, webcomponents
• Language: TypeScript
• Homepage: https://aray-date-picker.web.app/
• Size: 303 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Date Picker

![This is an image](/src/images/Date-picker.png)

## How to use

1. **CDN**

   - Pass

   ```html

   

   ```

   into your script tag src attribute. Then you can use the <aray-datepicker></aray-datepicker> tag in your HTML document.

2. **CLI**

   - Run

   ```js

   npm i aray-datepicker

   ```

   in your CLI. You can now import the createDatePicker Function by passing

   ```js

   import { createDatePicker } from 'aray-datepicker';

   ```

   in your JS file. Then call

   ```js

   createDatePicker('date-picker');

   ```

   You can now use the <date-picker></date-picker> tag in your HTML document.

### Links :-

- #### [View Demo Website](https://aray-date-picker.web.app/)

- #### View at [StackBlitz](https://stackblitz.com/edit/js-vksjbe?file=index.html,style.css)

- #### View at [CodePen](https://codepen.io/raheemscorp/details/OJZXRWR)

## Attributes



  
value

  


    Used in specifying the default input value. In this form

    value="YYYY-MM-DD"

  

  
open

  
Used in specifying the date picker visibility.

  
theme

  


    Used to determine the theme color of the web component, accepts

    eighter an hex code or RGB color code.

  

  
min

  


    Used in specifying the minimum date. In this form min="YYYY-MM-DD"

  

  
max

  


    Used in specifying the maximum date. In this form value="YYYY-MM-DD"

  

  
format

  


    Used in specifying the input date format. Accepts DD/MM/YYYY ,

    MM/DD/YYYY or YYYY/MM/DD e.g format="MM/DD/YYYY"

  

  
icon

  


    Used in pointing to the icon in your custom input. Where your icon has

    the aria-label attribute containing the same value specified.

  



##### Note -

> Pass this commented HTML below in between the component opening and closing tag to test your custom input. Style it to your taste. the slot attribute containing value of `input` is compulsory. An Icon is not necessary. If you use an icon connect it to the date picker tag passing the same value the the icon aria-label attribute to the date picker icon attribute

```html



  

  


    

      

      

    

  



```