ZZRPER is a plugin of @jyunzn/zz calendar library, its full name is ZZ Range Picker, which provides the function of selecting the range of days.
This plugin depends on @jyunzn/zz, so @jyunzn/zz must also be imported
npm install @jyunzn/zz @jyunzn/zzrper-
commonJS
const zz = require('@jyunzn/zz') const zzrper = require('@jyunzn/zzrper')
-
ES module
import zz from '@jyunzn/zz' import zzrper from '@jyunzn/zzrper'
-
unpkg
<script src="https://unpkg.com/@jyunzn/zz"></script> <script src="https://unpkg.com/@jyunzn/zzrper"></script>
-
jsdelivr ( npm )
<script src="https://cdn.jsdelivr.net/npm/@jyunzn/zz"></script> <script src="https://cdn.jsdelivr.net/npm/@jyunzn/zzrper"></script>
-
jsdelivr ( gh )
<script src="https://cdn.jsdelivr.net/gh/jyunzn/zz/dist/zz.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/jyunzn/zzrper/dist/zzrper.min.js"></script>
<!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;
}
.zzrp-select-start,.zzrp-select-end{
background: #2980b9
}
.zzrp-in-range{
background: #e74c3c
}
</style>
<!-- step1. import the module -->
<script src="https://cdn.jsdelivr.net/gh/jyunzn/zz/dist/zz.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jyunzn/zzrper/dist/zzrper.min.js"></script>
</head>
<body>
<div class="calendar"></div>
<script>
// step2. Install plugin
zz.use(zzrper)
// step3. Use plugin (zzrp: true)
zz({
zzrp: true, /*
// - set init select date
zzrp_cmz_initSelectStart: '2020-11-05',
zzrp_cmz_initSelectEnd: '2021-02-04',
// - set custom class name
// zzrp_cls_selectStart: 'start',
// zzrp_cls_selectEnd: 'end',
// zzrp_cls_inRange: 'inrange red',
// - set event
zzrp_onSelectStart(...args) {
console.log('start: ', ...args)
},
zzrp_onSelectEnd(...args) {
console.log('end:', ...args)
}
*/}).mount('.calendar')
</script>
</body>
</html>| option | default | description |
|---|---|---|
| zzrp | undefined |
If your calendar needs to use the zzrper plugin, must set this option to true |
| zzrp_onSelectStart | undefined |
|
| zzrp_onSelectEnd | undefined |
|
- All customizable class name settings
- If you need to set more than two class names, please separate them with spaces, such as
'apple banana'
| option | default |
|---|---|
| zzrp_cls_selectStart | 'zzrp-select-start' |
| zzrp_cls_selectEnd | 'zzrp-select-end' |
| zzrp_cls_inRange | 'zzrp-in-range' |