st-datepicker v0.2.7
A datepicker web component build with Stencil
It is based on MomentJS and use HammerJS for the gestures.
npm i st-datepicker or yarn add st-datepicker
How to use in Angular :
1 - Add the script in the .angular-cli.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 :
<head>
<script src='assets/st-datepicker/st-datepicker.js'></script>
</head>
3 - Add the CUSTOM_ELEMENTS_SCHEMA in the main module :
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
4 - Add the component in your template :
<oui-datepicker
[config]="your_config_object">
</oui-datepicker>
// Change the ref in Angular use :
this.config.attr = newValue;
How to use in Vue :
npm i @stencil/webpack or yarn add @stencil/webpack
// webpack.base.conf.js
const stencil = require('@stencil/webpack');
const StencilComponent =
new stencil.StencilPlugin({
collections : [
'../node_modules/st-datepicker/dist'
]
});
module.export = {
plugins: [StencilComponent]
}
// main.js
import 'st-datepicker/dist/st-datepicker';
Vue.config.ignoredElements = ['st-',];
<!-- 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.
// 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 :
// 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 :
<head>
<script src='assets/st-datepicker/st-datepicker.js'></script>
</head>
2 - Add the script tag on the bottom of the index.html :
<script>
var element = document.querySelector('st-datepicker');
var config = {...};
element.addEventListener('datepickerIsLoaded', function() {
element.initAppState(config)
});
</script>
Properties
Inputs
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 |
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago