# st-datepicker

> A web datepicker component

Latest version **0.2.7** (published 2018-03-27) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install st-datepicker
pnpm add st-datepicker
yarn add st-datepicker
bun add st-datepicker
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.2.7 |
| Published | 2018-03-27 |
| First published | 2018-03-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 357.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Ionic Team |
| Maintainers | fausfore |
| Keywords | Web Component, Stencil, datepicker, date-picker, calendar, Angular, Vue, React, Javascript |

## Links

- npm: https://www.npmjs.com/package/st-datepicker
- Repository: https://github.com/fausfore/st-datepicker
- Homepage: https://github.com/fausfore/st-datepicker#readme
- Issues: https://github.com/fausfore/st-datepicker/issues
- npm.io page: https://npm.io/package/st-datepicker

## Dependencies (3)

- [moment](https://npm.io/package/moment.md) ^2.21.0
- [hammerjs](https://npm.io/package/hammerjs.md) ^2.0.8
- [@stencil/core](https://npm.io/package/@stencil/core.md) ^0.6.18

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.2.7 (latest) — 2018-03-27
- 0.2.6 — 2018-03-26
- 0.2.5 — 2018-03-26
- 0.2.4 — 2018-03-26
- 0.2.3 — 2018-03-26
- 0.2.2 — 2018-03-26
- 0.2.1 — 2018-03-26
- 0.2.0 — 2018-03-26
- 0.1.9 — 2018-03-26
- 0.1.8 — 2018-03-26
- 0.1.7 — 2018-03-25
- 0.1.6 — 2018-03-24
- 0.1.5 — 2018-03-24
- 0.1.4 — 2018-03-24
- 0.1.3 — 2018-03-24
- … 12 more at https://npm.io/package/st-datepicker/versions

## README

# A datepicker web component build with Stencil

It is based on [MomentJS](https://momentjs.com/docs/) and use [HammerJS](https://hammerjs.github.io/) for the gestures.

<p align="center">
  <img src="https://github.com/fausfore/st-datepicker/blob/master/documentation/assets/mode-mobile.png"/>
</p>

```bash
npm i st-datepicker or yarn add st-datepicker
```

  
## How to use in Angular :

  

1 - Add the script in the *.angular-cli.json* :

```json

"assets": [
	"assets",
	"favicon.ico",
	{
		"glob": "**/*",
		"input": "../node_modules/st-datepicker/dist",
		"output": "./assets/st-datepicker"
	}
],
```

2 - Add the script tag in the *index.html* :

```html
<head>
	<script  src='assets/st-datepicker/st-datepicker.js'></script>
</head>
```

3 - Add the *CUSTOM_ELEMENTS_SCHEMA* in the main module :

```typescript

@NgModule({
	schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

```

4 - Add the component in your template :

```html
<oui-datepicker
	[config]="your_config_object">
</oui-datepicker>
```
```typescript
// Change the ref in Angular use :
this.config.attr = newValue;
```

## How to use in Vue :

```bash
npm i @stencil/webpack or yarn add @stencil/webpack
```
```javascript
// webpack.base.conf.js
const stencil = require('@stencil/webpack');

const StencilComponent =
	new stencil.StencilPlugin({
		collections : [
		'../node_modules/st-datepicker/dist'
		]
	});
	
module.export = {
	plugins: [StencilComponent]
}
```
```javascript
// main.js
import  'st-datepicker/dist/st-datepicker';

Vue.config.ignoredElements  = ['st-',];
```

```html
<!-- vue files -->
<template>
	<st-datepicker :config="configValue"></st-datepicker>
</template>
```

## How to use in React :

For React you can use **@stencil/webpack** ( *must eject the webpack config* ) like Vue or copy the dist folder into your **public** folder.
```html
// add the script on the index.html
<script  src="%PUBLIC_URL%/static/js/st-datepicker.js">
```
For the moment you can't use the React props binding until the React 17 so you will do like a vanilla :
```javascript
// define a state
this.state = {
	config: {...}
};
// component calendar Ref
this.calendar;

componentDidMount () {
	this.calendar = document.querySelector('st-datepicker');
	// Await the component mounting
	this.calendar.addEventListener('datepickerIsLoaded', () => {
		// Init component props
		this.calendar.initAppState(this.state.start)
		// remove event
		this.calendar.removeEventListener('datepickerIsLoaded', function() {
			console.log('stop event')
		})
	})
}
// If your state change
componentDidUpdate (prevProps, prevState) {
	this.state.config  !==  prevState.config
	?  this.calendar.initAppState(this.state.start)
	:  null
}
```


## How to use in Vanilla Js :

  2 - Add the script tag on the top of the *index.html* :

```html
<head>
	<script src='assets/st-datepicker/st-datepicker.js'></script>
</head>
```
  2 - Add the script tag on the bottom of the *index.html* :
  
  ```html
<script>
	var element = document.querySelector('st-datepicker');
	var config = {...};
	element.addEventListener('datepickerIsLoaded', function() {
		element.initAppState(config)
	});
</script>
```

## Properties

### Inputs

 ```typescript
interface  Model {
	mode:  string; // 'single' or 'range'
	singleValue:  string; // single only
	StartDateSelected:  string  // range only
	EndDateSelected:  string  // range only
	calendarIcon:  string;
	angleRightIcon:  string;
	angleLeftIcon:  string;
	closeIcon:  string;
	activePreviousDate:  boolean; // Active inputs before the current date
	startWeek: number // 0 => start on sunday and 1 => monday
	labels: {
		title:  string;
		title_2:  string; // range only
		datepickerBtnValue:  string;
		rangeNextBtnValue: string; // range only
		months:  string[];
		days:  string[];
	}
}
 ```

### Events

| Properties | Types | Value |
|--|--|--|
| selectSingleDate | Event | Moment |
| startDateSelectedEvent | Event | Moment |
| endDateSelectedEvent | Event | Moment |
| datepickerIsLoaded | Event | boolean |

---
_Source: https://npm.io/package/st-datepicker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._