@jyunzn/zzsper
v0.0.0-alpha.2
Published
This is @jyunzn/zz's plugin to picker single date
Downloads
7
Maintainers
jyunznReadme
ZZSPER
Installation
This plugin depends on @jyunzn/zz, so @jyunzn/zz must also be imported
npm
npm install @jyunzn/zz @jyunzn/zzspercommonJS
const zz = require('@jyunzn/zz') const zzsper = require('@jyunzn/zzsper')ES module
import zz from '@jyunzn/zz' import zzsper from '@jyunzn/zzsper'
CDN
unpkg
<script src="https://unpkg.com/@jyunzn/zz"></script> <script src="https://unpkg.com/@jyunzn/zzsper"></script>jsdelivr
<script src="https://cdn.jsdelivr.net/npm/@jyunzn/zz"></script> <script src="https://cdn.jsdelivr.net/npm/@jyunzn/zzsper"></script>
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- set some style -->
<link href="https://cdn.jsdelivr.net/gh/jyunzn/[email protected]/examples/default.min.css" rel="stylesheet"/>
<style>
.calendar {
position: relative;
padding: 50px 30px;
}
.zzsp-selected {
background: black;
}
</style>
<!-- step1. import the module -->
<script src="https://unpkg.com/@jyunzn/zz"></script>
<script src="https://unpkg.com/@jyunzn/zzsper"></script>
</head>
<body>
<div class="calendar"></div>
<script>
// step2. Install plugin
zz.use(zzsper)
// step3. Use plugin (zzsp: true)
zz({
zzsp: true, /*
// - other options
zzsp_cls_selected: 'zzsp-selected apple',
zzsp_cmz_initSelectDate: '2020-11-11',
// - set event
zzsp_onSelected(date) {
console.log(date)
}
*/}).mount('.calendar')
</script>
</body>
</html>Options
option | default | description
------------------------|-----------------|---------------------
zzsp | undefined | If your calendar needs to use the zzsper plugin, must set this option to true
zzsp_cls_selected | zzsp-selected | Customize the class name of the selected date.If more than two class names are required, separate them with spaces
zzsp_cmz_initSelectDate | null | Initial date settingFormat: yyyy-mm-dd
zzsp_onSelected | undefined | Timing: When the user clicks on the dateParameter: { selectedDate, selectingDate }selectedDate: Last selected dateselectingDate: The date selected this time