19 lines
17 KiB
HTML
19 lines
17 KiB
HTML
<!DOCTYPE html> <head> <meta charset=utf-8> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content=#333333 name=theme-color> <base href=/svelma-pro/ > <link href=global.css rel=stylesheet> <link href=manifest.json rel=manifest> <link href=favicon.ico rel=icon type=image/png> <link href=./all.css rel=stylesheet> <link href=client/main.1916252291.css rel=stylesheet><link href=client/chunk.f5a3f321.css rel=stylesheet><link href=client/chunk.b01e898f.css rel=stylesheet><link href=client/chunk.fb378401.css rel=stylesheet><link href=client/chunk.94a6e723.css rel=stylesheet> <noscript id=sapper-head-start></noscript><title>svelma-pro</title><meta content=Svelma property=og:site_name><meta content=https://c0bra.github.io/svelma-pro/svelma-pro-logo.png property=og:image><meta content=200 property=og:image:width><meta content=200 property=og:image:height><meta property=og:url><meta content=article property=og:type><meta content="Datepicker | Svelma" property=og:title><meta content=日期选择器 property=og:description><noscript id=sapper-head-end></noscript> </head> <body> <div id=sapper> <nav class="has-shadow is-spaced navbar" id=navbar><div class=container style=height:50px;min-height:50px><div class=navbar-brand><a href=/ class="brand navbar-item svelte-19nr2rz"> svelma-pro </a></div></div></nav> <main><section class="svelte-1ib6y6h docs"><div class="svelte-h7woek sidebar-bg"></div> <aside class="svelte-h7woek sidebar"><p class="svelte-h7woek sidebar-label">Installation</p> <ul class=svelte-h7woek><li class=svelte-h7woek><a href=install>Start</a></ul> <p class="svelte-h7woek sidebar-label">Bulma Elements</p> <ul class=svelte-h7woek><li class=svelte-h7woek><a href=bulma/intro>Intro</a></li> <li class=svelte-h7woek><a href=bulma/hero>Hero</a> <li class=svelte-h7woek><a href=bulma/media>Media</a> <li class=svelte-h7woek><a href=bulma/table>Table</a> <li class=svelte-h7woek><a href=bulma/tiles>Tiles</a> </ul> <p class="svelte-h7woek sidebar-label">Svelma Components</p> <ul class=svelte-h7woek><li class=svelte-h7woek><a href=components/button>Button </a> <li class=svelte-h7woek><a href=components/carousel>Carousel </a> <li class=svelte-h7woek><a href=components/collapse>Collapse </a> <li class=svelte-h7woek><a href=components/colorpicker>ColorPicker <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/datepicker>Datepicker <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/dialog>Dialog </a> <li class=svelte-h7woek><a href=components/district>District <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><p>Form</p> <ul class=svelte-h7woek><li class=svelte-h7woek><a href=components/field>Field </a> <li class=svelte-h7woek><a href=components/input>Input </a> <li class=svelte-h7woek><a href=components/switch>Switch </a> </li> </ul> <li class=svelte-h7woek><a href=components/icon>Icon </a> <li class=svelte-h7woek><a href=components/layout>Layout <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/message>Message </a> <li class=svelte-h7woek><a href=components/modal>Modal </a> <li class=svelte-h7woek><a href=components/nav>Nav <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/notification>Notification </a> <li class=svelte-h7woek><a href=components/pagination>Pagination </a> <li class=svelte-h7woek><a href=components/progress>Progress </a> <li class=svelte-h7woek><a href=components/select>Select <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/slider>Slider <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/snackbar>Snackbar </a> <li class=svelte-h7woek><a href=components/stable>Stable <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/table>Table </a> <li class=svelte-h7woek><a href=components/tabs>Tabs </a> <li class=svelte-h7woek><a href=components/timepicker>Timepicker <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/tip>Tip <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/toast>Toast </a> </li> </ul></aside> <div class="svelte-1ib6y6h docs-main"> <header class=header><h1 class=title>Datepicker</h1> <h2 class=subtitle>日期选择器</h2></header> <p class="title is-4">默认与暗黑主题</p> <div class="svelte-150a96u snippet"><form action=https://codesandbox.io/api/v1/sandboxes/define method=POST target=_blank><input value=N4IgZglgNgpgziAXKOBDAdgEwEYHsAeAdAMa7qQDmhAVnGUqKegC4wsMisC2ADlKqyQg4ANxhRBAX0kAaEBCwwiAC2ZcoHJq3aIQAHlXqAfAB10AAnN68mAJ6mLlq1AUBrM06cRMAXhMglVgAndFQoAFpiODh_D09zIPE_YWZbWDhlGBhmWMdPVJ4YZNZ8ZgB6KJiQOM9lRLBk1WYeOEQysoBXdB5XKlIuMuwOqC5UCujB4dHCLgUSaNz48y4YTAhUZLCoRacyh089F3R3PK9ff0CYELDI6IAmHc9EqGS4VPTM7MenAqL_EvKlW-ljqMAa_iaLTanTgMEIYDIzFQAHd4LgViR0WVnjBULC4GURABWQgAZkIAEZxgStvMqjUnCs1ht_Ftvns4npBrg7A4uYYoEYQLJ5IoiLRNIi2MwhBBeLggsxzABBHg8cxgILo8z-QhlVU8QiicSsfwAbjMZiYb3MqDV5h85nQMGRKrVAApgHEkUEKNlEOZMLhiB0VixCDZbGZJABKC3oMxKHgKpWYMGoYZKu08M3CuQGo1iCQwSUsaVCPRwYhBCA8Zj7cxy5OK8zAAAiAhgPAgxFcV0kGq1XHMAHJjSNUOEeFqR2YuVWa3WHHOO6xu72rhz0HpV12e32guZmJkVslMKggu4QFu8yAeKhe6g_TQ6OhS9oZcgQKEVkJx6NwiUVBeFgEA5DEII4AgehdApQgAAYELAkA0xENsuzYNN0GICB4A4bouHCIIunCLYhAAPQAFkpQgiWQrUoCgDoeAouCKUQil6NwRjmKnJiKAUSJ0S4MgJV0ciAE4yUISiuJ4ng-I6AT0HCdAeRgIi0SgMQKOou4yTkpiFL4JTBPHQRxJJRDSUM3iTOU8JglhIJdIQmTkKgoIREiFwKOsylbzTQpFGw3CEC_cyS10fhWDeDyi1GIQYvgGU5AAAQRRUUTRFYygRFhsroFZwk1LIks7OK5CGCdytimURQXWtmHC0AhmgTAhAYozzEiZCM2YXA2qgDrdC65ieuIHrkWQ1DOpI9U3gvZhEFQ20OgGoaOrkRbFT_CAvPMHgOmwFxiA8n1ltm3RPJEQ7jtOnrwlm6QXqAA name=parameters type=hidden> <div class="slot-wrap svelte-7fflr3"><div class="svelte-150a96u codepen-button">Codesandbox <i class="icon fa-external-link-alt fas is-small"></i></div></div></form> <div class="svelte-150a96u preview"><div slot=preview> <div style=width:100%;position:relative><div style="position:relative;margin:5px 0 0 0"><div class="svelte-nhop5 control has-icons-left"><input value=2021-3-30 class="svelte-nhop5 input" icon=calendar iconpack=fa id=1617093985108 readonly> <span class="icon icon is-left svelte-o4tq5q"> <i class="fa fa-calendar svelte-o4tq5q"></i></span> </div> </div> </div> <div style=width:100%;position:relative><div style="position:relative;margin:5px 0 0 0"><div class="svelte-nhop5 control has-icons-left"><input value=2021-3-30 class="svelte-nhop5 input" icon=calendar iconpack=fa id=1617093985111 readonly> <span class="icon icon is-left svelte-o4tq5q"> <i class="fa fa-calendar svelte-o4tq5q"></i></span> </div> </div> </div></div></div> <div class="svelte-150a96u code"> <div class="svelte-1ccczge codeview"><figure class="svelte-1ccczge highlight is-expanded"><div class="svelte-1ccczge button-container"><button class="is-small button copy-code is-text">Copy</button></div> <pre class="svelte-1ccczge hidden"><code class="svelte-1ccczge xml"></code></pre> <pre class="svelte-1ccczge hidden"><code><script>
|
||
import {Datepicker} from 'svelma-pro'
|
||
</script>
|
||
|
||
<Datepicker/>
|
||
<Datepicker theme="dark"/></code></pre></figure></div> </div></div> <hr class=is-medium> <p class="title is-4">范围选择与自由选择</p> <div class="svelte-150a96u snippet"><form action=https://codesandbox.io/api/v1/sandboxes/define method=POST target=_blank><input value=N4IgZglgNgpgziAXKOBDAdgEwEYHsAeAdAMa7qQDmhAVnGUqKegC4wsMisC2ADlKqyQg4ANxhRBAX0kAaEBCwwiAC2ZcoHJq3aIQAHlXqAfAB10AAnN68mAJ6mLlq1AUBrM06cRMAXhMglVgAndFQoAFpiODh_D09zIPE_YWZbWDhlGBhmWMdPVJ4YZNZ8ZgB6KJiQOM9lRLBk1WYeOEQysoBXdB5XKlIuMuwOqC5UCujB4dHCLgUSaNz48y4YTAhUZLCoRacyh089F3R3PK9ff0CYELDI6IAmHc9EqGS4VPTM7MenAqL_EvKlW-ljqMAa_iaLTanTgMEIYDIzFQAHd4LgViR0WVnjBULC4GURABWQgAZkIAEZxgStvMqjUnCs1ht_Ftvns4npBrg7A4uYYoEYQLJ5IoiLRNIi2MwhBBeLggsxzABBHg8cxgILo8z-QhlVU8QiicSsfwAbjMZiYb3MqDV5h85nQMGRKrVAApgHEkUEKNlEOZMLhiB0VixCDZbGZJABKC3oMxKHgKpWYMGoYZKu08M3CuQGo1iCQwSUsaVCPRwYhBCA8Zj7cxy5OK8zAAAiAhgPAgxFcV0kGq1XHMAHJjSNUOEeFqR2YuVWa3WHHOO6xu72ruZ132ggAlYZ_cCJGAAYWUuB7MH8HPQelXXZ7O63j6u-9gySCGD9Z4vxCvIBvPMQB4VBe1QP0aDodBS20GVkBAUIViEcdRnCJRUF4WAQDkMQgjgCB6F0ClCAABlI7CQDTEQ2y7Ng03QYgIHgDhui4cIgi6cItiEAA9AAWSlCCJCitSgKAOh4XjiIpMiKRE3AxIkqdxIoBRInRLgyAlXQeIATjJQg-PkxSeGUjpVPQcJ0B5GB2LRKAxF4gS7jJYzxNMvhzLU8dBB0kkyNJNylM8izwmCWEgic0jDIo_CghESIXF4gLKSAtNCkUBimIQeCfJLXR-FYN5YqLUYhEK-AZTkAABBFFRRNEVjKBEWAaugVnCTUsnKztirkIYJx6oqZRFBda2YHLQCGaBMCEUT3PMSIKIzZhcGmqBZt0eaJMW4hFuRCiqLmzj1TeVBFUQKjbQ6Vb1tmuQzsVZCIHircOmwFxiFin1mEumARGe16eHez7FvCI7pEhoA name=parameters type=hidden> <div class="slot-wrap svelte-7fflr3"><div class="svelte-150a96u codepen-button">Codesandbox <i class="icon fa-external-link-alt fas is-small"></i></div></div></form> <div class="svelte-150a96u preview"><div slot=preview> <div style=width:100%;position:relative><div style="position:relative;margin:5px 0 0 0"><div class="svelte-nhop5 control has-icons-left"><input value=2021-3-30 class="svelte-nhop5 input" icon=calendar iconpack=fa id=1617093985113 readonly> <span class="icon icon is-left svelte-o4tq5q"> <i class="fa fa-calendar svelte-o4tq5q"></i></span> </div> </div> </div> <div style=width:100%;position:relative><div style="position:relative;margin:5px 0 0 0"><div class="svelte-nhop5 control has-icons-left"><input value="2021-3-30 ~ 2021-3-30" class="svelte-nhop5 input" icon=calendar iconpack=fa id=1617093985113 readonly> <span class="icon icon is-left svelte-o4tq5q"> <i class="fa fa-calendar svelte-o4tq5q"></i></span> </div></div> </div></div></div> <div class="svelte-150a96u code"> <div class="svelte-1ccczge codeview"><figure class="svelte-1ccczge highlight is-expanded"><div class="svelte-1ccczge button-container"><button class="is-small button copy-code is-text">Copy</button></div> <pre class="svelte-1ccczge hidden"><code class="svelte-1ccczge xml"></code></pre> <pre class="svelte-1ccczge hidden"><code><script>
|
||
import {Datepicker} from 'svelma-pro'
|
||
</script>
|
||
|
||
<Datepicker pickerRule="freeChoice"/>
|
||
<Datepicker pickerRule="rangeChoice"/></code></pre></figure></div> </div></div> <hr class=is-medium> <p class="title is-4">获取结果</p> <div class="svelte-150a96u snippet"><form action=https://codesandbox.io/api/v1/sandboxes/define method=POST target=_blank><input value=N4IgZglgNgpgziAXKOBDAdgEwEYHsAeAdAMa7qQDmhAVnGUqKegC4wsMisC2ADlKqyQg4ANxhRBAX0kAaEBCwwiAC2ZcoHJq3aIQAHlXqAfAB10AAnN68mAJ6mLlq1AUBrM06cRMAXhMglVgAndFQoAFpiODh_D09zIPE_YWZbWDhlGBhmWMdPVJ4YZNZ8ZgB6KJiQOM9lRLBk1WYeOEQysoBXdB5XKlIuMuwOqC5UCujB4dHCLgUSaNz48y4YTAhUZLCoRacyh089F3R3PK9ff0CYELDI6IAmHc9EqGS4VPTM7MenAqL_EvKlW-ljqMAa_iaLTanTgMEIYDIzFQAHd4LgViR0WVnjBULC4GURABWQgAZkIAEZxgStvMqjUnCs1ht_Ftvns4npBrg7A4uYYoEYQLJ5IoiLRNIi2MwhBBeLggsxzABBHg8cxgILo8z-QhlVU8QiicSsfwAbjMZiYb3MqDV5h85nQMGRKrVAApgHEkUEKNlEOZMLhiB0VixCDZbGZJABKC3oMxKHgKpWYMGoYZKu08M3CuQGo1iCQwSUsaVCPRwYhBCA8Zj7cxy5OK8wAEQEMB4EGIriuGq1XHMAHJjSNUOEeFqh5bHGAusRmBAyOZiC4e-6YDGvacwldmBvCGmkdBCIuVgBlJG8GNxSRmLlVmt1hz39usLs9vtkRCYDsAYUyT9fGAVdu1cSQOXQPMQB4VAe1QP0aDoKDkBALRy1Q0IViEUdRnCJRUF4WAQDkMQgjgJcUJAClCAABjokiQDTERW07Ng03QYgIHgDhui4cIgi6cItiEAA9AAWSlCCJRitSgKAOh4MSaIpeiKVk3B5MUicFIoBRInRLgyAlXRRIATjJQhxI0rSeB0jo9PQcJ0B5GABLRKAxDEyS7jJGyFLsvgHP00dBFMkl6NJfztKCxzwmCWEgm8uirMYiighESIXDEyLKWgtNCkUTjuIQVDQpLXR-FYN40qLUYhCq-AZTkAABBFFRRNEVjKBEWE6ugVnCTUsgajsarkIYx1G6qZRFR9a2YUrQCGaBMCEOSAvMSJGIzZhcBWqA1t0DbFK24gtuRRjmPWoT1TeVBFR_GARFtDo9oOta5HuxUcIgDLzB4DpsDXNKfWYJ6RF-_7AeB7stvCa7pCRoA name=parameters type=hidden> <div class="slot-wrap svelte-7fflr3"><div class="svelte-150a96u codepen-button">Codesandbox <i class="icon fa-external-link-alt fas is-small"></i></div></div></form> <div class="svelte-150a96u preview"><div slot=preview> <div style=width:100%;position:relative><div style="position:relative;margin:5px 0 0 0"><div class="svelte-nhop5 control has-icons-left"><input value=2021-3-30 class="svelte-nhop5 input" icon=calendar iconpack=fa id=1617093985114 readonly> <span class="icon icon is-left svelte-o4tq5q"> <i class="fa fa-calendar svelte-o4tq5q"></i></span> </div> </div> </div></div></div> <div class="svelte-150a96u code"> <div class="svelte-1ccczge codeview"><figure class="svelte-1ccczge highlight is-expanded"><div class="svelte-1ccczge button-container"><button class="is-small button copy-code is-text">Copy</button></div> <pre class="svelte-1ccczge hidden"><code class="svelte-1ccczge xml"></code></pre> <pre class="svelte-1ccczge hidden"><code><script>
|
||
import Datepicker from 'svelma-pro'
|
||
|
||
function click(e){
|
||
alert(e.detail.timeStamp)
|
||
}
|
||
</script>
|
||
|
||
<Datepicker on:dateChecked={click}/></code></pre></figure></div> </div></div> <hr class=is-medium> <section><h2 class="title is-4">API</h2> <div class="svelte-2ae2jn table-wrapper"><table class="is-fullwidth table"><thead><tr><th>Name</th> <th>Description</th> <th>Type</th> <th>Values</th> <th>Default</thead> <tr><td><code>date</code></td> <td>当前日期</td> <td>timestamp</td> <td>—</td> <td><code></code></td> <tr><td><code>i18n</code></td> <td>多语言</td> <td>String</td> <td>'EN'、'ZH'</td> <td><code>'ZH'</code></td> <tr><td><code>theme</code></td> <td>主题</td> <td>String</td> <td>'light'、'dark'</td> <td><code>'light'</code></td> <tr><td><code>markDate</code></td> <td>标记的日期集合</td> <td>Array</td> <td>['2020-3-1','2020-3-2','2020-3-3'...]</td> <td><code></code></td> <tr><td><code>disableDateRule</code></td> <td>禁用规则。'piecemeal'表示零碎的，不连续的；'range'表示为一个范围。</td> <td>String</td> <td>'piecemeal'、'range'</td> <td><code></code></td> <tr><td><code>disableDate</code></td> <td>当disableDateRule为piecemeal时，格式为['2020-3-1','2020-3-2'...] 当disableDateRule为range时，格式为[{start:'2019-3-27'},{end:'2020-3-27'}]</td> <td>Array, Object</td> <td>['2020-3-1','2020-3-2'...] or [{start:'2019-3-27'},{end:'2020-3-27'}]</td> <td><code></code></td> <tr><td><code>pickerRule</code></td> <td>选取规则：singleChoice（单选）、freeChoice（自由选择）、rangeChoice(范围选择)</td> <td>String</td> <td>'singleChoice'、'freeChoice'、'rangeChoice'</td> <td><code>'singleChoice'</code></td> <tr><td><code>pickerResult</code></td> <td>选取结果，请与外部变量绑定来获取结果值</td> <td></td> <td>—</td> <td><code>''</code></td> <tr><td><code>calendar</code></td> <td>日历模式</td> <td>Boolean</td> <td>—</td> <td><code>false</code></td> <tr><td><code>width</code></td> <td>宽度</td> <td>Sting</td> <td>px,%,rem</td> <td><code>300px</code></td> <tr><td><code>align</code></td> <td>位置</td> <td>Sting</td> <td>'left'、'center'、'right'</td> <td><code>left</code></td> <tr><td><code>icon</code></td> <td>图标</td> <td>Boolean</td> <td>—</td> <td><code>true</code></td> <tr><td><code>inputClass</code></td> <td>输入框样式类</td> <td>String</td> <td>—</td> <td><code></code></td> </table></div></section> <hr class=is-medium> <section><h2 class="title is-4">EVENT</h2> <div class="svelte-2ae2jn table-wrapper"><table class="is-fullwidth table"><thead><tr><th>Name</th> <th>Parameters</th> <th>Description</thead> <tr><td><code>dateChecked</code></td> <td>—</td> <td>选定事件</td> </table></div></section></div></section></main></div> <script>__SAPPER__={baseUrl:"/svelma-pro",preloaded:[void 0,null,(function(a,b,c,d,e){return {jsdoc:[{description:"当前日期",type:["timestamp"],defaultvalue:a,name:"date",values:a},{description:"多语言",type:[b],defaultvalue:"'ZH'",name:"i18n",values:"'EN'、'ZH'"},{description:"主题",type:[b],defaultvalue:"'light'",name:"theme",values:"'light'、'dark'"},{description:"标记的日期集合",type:[c],defaultvalue:a,name:"markDate",values:"['2020-3-1','2020-3-2','2020-3-3'...]"},{description:"禁用规则。'piecemeal'表示零碎的，不连续的；'range'表示为一个范围。",type:[b],defaultvalue:a,name:"disableDateRule",values:"'piecemeal'、'range'"},{description:"当disableDateRule为piecemeal时，格式为['2020-3-1','2020-3-2'...] 当disableDateRule为range时，格式为[{start:'2019-3-27'},{end:'2020-3-27'}]",type:[c,"Object"],defaultvalue:a,name:"disableDate",values:"['2020-3-1','2020-3-2'...] or [{start:'2019-3-27'},{end:'2020-3-27'}]"},{description:"选取规则：singleChoice（单选）、freeChoice（自由选择）、rangeChoice(范围选择)",type:[b],defaultvalue:"'singleChoice'",name:"pickerRule",values:"'singleChoice'、'freeChoice'、'rangeChoice'"},{description:"选取结果，请与外部变量绑定来获取结果值",type:[],defaultvalue:"''",name:"pickerResult",values:a},{description:"日历模式",type:[d],defaultvalue:"false",name:"calendar",values:a},{isEvent:true,description:"选定事件",name:"dateChecked",values:a},{description:"宽度",type:[e],defaultvalue:"300px",name:"width",values:"px,%,rem"},{description:"位置",type:[e],defaultvalue:"left",name:"align",values:"'left'、'center'、'right'"},{description:"图标",type:[d],defaultvalue:"true",name:"icon",values:a},{description:"输入框样式类",type:[b],defaultvalue:a,name:"inputClass",values:a}]}}("","String","Array","Boolean","Sting"))]};if('serviceWorker' in navigator)navigator.serviceWorker.register('/svelma-pro/service-worker.js');var s=document.createElement("script");try{new Function("if(0)import('')")();s.src="/svelma-pro/client/client.3704696d.js";s.type="module";s.crossOrigin="use-credentials";}catch(e){s.src="/svelma-pro/client/shimport@1.0.1.js";s.setAttribute("data-main","/svelma-pro/client/client.3704696d.js")}document.head.appendChild(s)</script> |