1.7.5 • Published 4 years ago
@k1laba/st-datepicker v1.7.5
Demo
https://k1laba.github.io/st-datepicker/
Installation
Add a script tags in your html
<script type="module" src="https://unpkg.com/@k1laba/st-datepicker/dist/st-datepicker/st-datepicker.esm.js"></script>
<script nomodule="" src="https://unpkg.com/@k1laba/st-datepicker/dist/st-datepicker/st-datepicker.js"></script>
only one of them will be loaded for users
Examples
To show date picker:
<st-datepicker from="2010" to="2025"></st-datepicker>
subscribe to date change:
window.onload = () => {
const dateEl = document.querySelector('st-datepicker');
const resultEl = document.querySelector('#date-result');
dateEl.addEventListener('dateChanged', (e) => resultEl.innerHTML = e.detail.toDateString());
};
get date from date picker:
(async () => {
resultEl.innerHTML = (await dateEl.getDate()).toDateString();
})();
for more details on datepicker available parameters visit st-datepicker
To show date range picker:
<st-daterangepicker></st-daterangepicker>
subscribe to date range change:
window.onload = () => {
const rangeEl = document.querySelector('st-daterangepicker');
const rangeResultEl = document.querySelector('#range-result');
rangeEl.addEventListener('dateChanged', (e) => {
rangeResultEl.innerHTML = e.detail.start.toDateString() + ' - ' + e.detail.end.toDateString();
});
};
get date range from date range picker:
(async () => {
const rangeInfo = await rangeEl.getDateRange();
rangeResultEl.innerHTML = rangeInfo.start.toDateString() + ' - ' + rangeInfo.end.toDateString();
})();
for more details on daterangepicker available parameters visit st-daterangepicker
1.7.5
4 years ago
1.7.4
4 years ago
1.7.3
4 years ago
1.7.2
4 years ago
1.7.1
4 years ago
1.7.0
4 years ago
1.6.2
4 years ago
1.6.1
4 years ago
1.6.0
4 years ago
1.5.3
4 years ago
1.5.2
4 years ago
1.5.1
4 years ago
1.5.0
4 years ago
1.4.0
4 years ago
1.3.0
4 years ago
1.2.0
4 years ago
1.1.1
4 years ago
1.1.0
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago