{"_id":"@dfeidao/fd-w000006","_rev":"4-2885de3e602ce18fd01e7984d0a4dfc6","name":"@dfeidao/fd-w000006","dist-tags":{"dev":"4.6.201905201119","latest":"4.6.201908051153"},"versions":{"4.6.201905201119":{"name":"@dfeidao/fd-w000006","version":"4.6.201905201119","description":"日期选择","scripts":{"lint":"tslint -p ./tsconfig.json","build":"../../node_modules/.bin/gulp","test":"../../node_modules/.bin/gulp dev","umd":"../../node_modules/.bin/gulp umd"},"repository":{"type":"git","url":"https://gitee.com/dfeidao/widgets"},"keywords":["feidao","01feidao","dfeidao","atom","飞道","控件","ai"],"author":{"name":"taoqf","email":"tao_qiufeng@126.com","url":"http://www.01feidao.com/"},"maintainers":[{"name":"mashizhen","email":"mashizhen123@dingtalk.com"},{"name":"taoqf","email":"tao_qiufeng@126.com"}],"license":"MIT","peerDependencies":{},"dependencies":{"@dfeidao/core":"^4.6.201904301027"},"devDependencies":{"purecss":"^1.0.0"},"_id":"@dfeidao/fd-w000006@4.6.201905201119","_nodeVersion":"12.2.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-dyn2gAt4/AVd1iVUGlDuIWZuP1ySyvhrvd5RQWxeqML8NzWv4lK+gLbKJtncAYBA/9RQ7FVFj8lxI46E3fbpVQ==","shasum":"aa2daa03f5c77db12cc9558a05f02a546743c918","tarball":"https://registry.npmjs.org/@dfeidao/fd-w000006/-/fd-w000006-4.6.201905201119.tgz","fileCount":5,"unpackedSize":31505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc4hzOCRA9TVsSAnZWagAA66YP/0mviZRJklV3cOAHtiYs\nHp4tM2Xl5XrD+Txd1j9noTXVEwH4qfhvE64slzAD34NLLVcAHuXyZ6RRR1+2\n5WWLOFDFS1XFvcSfFTwjJGg/E9e8ys0Apnpe2/iKDlW1G1NtyHpVl23KlrJz\nkogGk3tylh1WI0UzoLn8cKh4a04bApJlWK0R0RDwhSXJgI+K3E5YKr6+bTby\nkVbDP4sPE3M4xiFPExjsP5YyBCWBZLrjCahmPvJAn/JXuHMFGu/aVy+Hem3C\nFosVvsoBqXt6QAwpMjpzWQk9GhWdJ5HmLmzRIC+fCr0prtUTdbchmsvT92ME\nLfBcpStPI+usuDJZJ9j86r9GagwOMSa4YM5q5j17JwDnW93F+vkr1BlCWMC8\npSjDy8jwKNGPlZOLKE+RI05S5jOkydGQskH+IKx4uT9SDvtS92KslpYJmbWL\ngfACLBiG83CREyEVdWRuf6vrMvNkw9k1d9wGkSN3Sa+sBB6M1TdShi+cC9Di\nnWYarBbHVj7KmiGkvD/wfa8wcINefV5UYTAi7YCRB877LgaP6gU+rnf+MLAP\nY4+k6RFLZQwtT13fdYJRUZ5MGi51e0TTp88Dxz2CHe5gShs4MknWN7uw5Tl9\ncMuZp6otaRR32qaAyeuxIP4SW5ZA4rR0kG0JtV7r1CmeSKaotjFfXgY7ECsf\nJGVs\r\n=1t5Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCgUWVAwcfIWkbwcytul6KHE/+NaVNFITtxpsljyrPbYAIgI9+zZizSgLn9zRAFV3FsjuZonCc3Vujg6cSE0Pwox/c="}]},"_npmUser":{"name":"taoqf","email":"tao_qiufeng@126.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fd-w000006_4.6.201905201119_1558322381803_0.28893788978764046"},"_hasShrinkwrap":false},"4.6.201907081014":{"name":"@dfeidao/fd-w000006","version":"4.6.201907081014","description":"日期选择","scripts":{"lint":"tslint -p ./tsconfig.json","build":"../../node_modules/.bin/gulp","test":"../../node_modules/.bin/gulp dev","umd":"../../node_modules/.bin/gulp umd"},"repository":{"type":"git","url":"https://gitee.com/dfeidao/widgets"},"keywords":["feidao","01feidao","dfeidao","atom","飞道","控件","ai"],"author":{"name":"taoqf","email":"tao_qiufeng@126.com","url":"http://www.01feidao.com/"},"maintainers":[{"email":"tao_qiufeng@126.com","name":"taoqf"}],"license":"MIT","peerDependencies":{},"dependencies":{"@dfeidao/core":"4.6.201904301027"},"devDependencies":{"purecss":"^1.0.0"},"_id":"@dfeidao/fd-w000006@4.6.201907081014","_nodeVersion":"12.6.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-TbiCag2Zy5MswwFdVIx1rx/FGd2wWhZ8EwBBLgymo1KgqA/Q/80oNKPx6dJp22+s4Ea8lVpohSKRTP4S+fSSKg==","shasum":"6b986fe0446f4bea8a93001f5f28fd11432f54bc","tarball":"https://registry.npmjs.org/@dfeidao/fd-w000006/-/fd-w000006-4.6.201907081014.tgz","fileCount":6,"unpackedSize":30386,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdIqcrCRA9TVsSAnZWagAAMKcQAKTF234OSxb8p6XLPhSP\nyN6hlIPzBk0sWuvq6U0HkxnRximrD92BqLPb57xUGgkBQ/zv4G4LtlORTSIW\nXMbRwIKu0Lx/NcDYmOHc3mNoO6EWsOT30JOT3oZ/UergPPvcOqwiE7EPV7YV\nMhHvB1ApByU7dPWJrUQoEJZHChTMLBwT2vw/lacZeNGD3pwFS6SsuQaPZiHa\nzEEYfCjxodBUgzDqEsrj7ZSsV+pLF7rmX9IS2luIU76g8GZiubJ2p4kGdAvT\ngl+0YXd7s+20VIhrY7Upox8N2uSiQH0vT6mfm8l7WJT0ObPZs4ZE1JJNAD7Q\ne4aIO2UxWOTk4sLQtlcizdw+zNn6W1INBtmm8zBQ+r+x0Aba6Usa2T5ELMOn\negv2zJriJxTOLeCJ5DcfOxqeQWUEpe0Mda2TfFIiuyvYH6MPka8A7FdHODC5\nZ8KjWnGI2k07vPFRJvxaCw9tuxw+npSHLv4i3iDOMe8kZboxnYo7QGTEYzcU\nl1/dSoB34DcP4Y/thSrtLETA0IppT2kHDeKUG3MtgaoPRzTjmj8ES8PrxF48\n5SUXIGT2psyxtzgYBYq+0KcYCiNOQ9pZieOJXlLLriPZhDrvLpEIdeNFXXMU\nMxw4M4dAkpp0QMlEHF+zhA6yoK9raJudpPOJRN5dnmCe1EY+MXqe0ZAXjSwc\nFdlj\r\n=+MLp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFZVIezImthZbTo5N0/brU/NFV0BfacW18Y4HxVmBd8+AiBKi5fF5Ytlu7nPFoZnCHsUImN/22mlgK71TaJoocrJAw=="}]},"_npmUser":{"name":"taoqf","email":"tao_qiufeng@126.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fd-w000006_4.6.201907081014_1562552107173_0.46986071790171335"},"_hasShrinkwrap":false},"4.6.201908051153":{"name":"@dfeidao/fd-w000006","version":"4.6.201908051153","description":"日期选择","scripts":{"lint":"tslint -p ./tsconfig.json","build":"../../node_modules/.bin/gulp","test":"../../node_modules/.bin/gulp dev","umd":"../../node_modules/.bin/gulp umd"},"repository":{"type":"git","url":"https://gitee.com/dfeidao/widgets"},"keywords":["feidao","01feidao","dfeidao","atom","飞道","控件","ai"],"author":{"name":"taoqf","email":"tao_qiufeng@126.com","url":"http://www.01feidao.com/"},"maintainers":[{"email":"tao_qiufeng@126.com","name":"taoqf"}],"license":"MIT","peerDependencies":{},"dependencies":{"@dfeidao/core":"4.6.201904301027"},"devDependencies":{"purecss":"^1.0.0"},"_id":"@dfeidao/fd-w000006@4.6.201908051153","_nodeVersion":"12.6.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-5j6J55kA+yJc5Wh5IgeWBiRlS/LXL2cCqY/bpd+h+CRbcKiZ7Man74UvkXOMWRw9/33ZxHkGwYcinBp34kKjtw==","shasum":"c8b02c1cf520c57fbd0c5111ac591ac9903601f7","tarball":"https://registry.npmjs.org/@dfeidao/fd-w000006/-/fd-w000006-4.6.201908051153.tgz","fileCount":6,"unpackedSize":48016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdR6hWCRA9TVsSAnZWagAAnTAP/2hpIDMi5nbUy78Siece\n4eG+rAp9oz7bVOwmxF9OQ3SKMWIeESYmr+zocyntSnKpk5J48xyq7It9qySJ\nI0ujB+5d0DrmsNIb5MZeIa895GteBm9Ndx1foZPDIJCTnl/NU60dSPZL0sLx\nwLQMPLZTIbGgV9Rkap1DGPeCIsFTXpBHW4xrDW7ZlFQpdwCvEBhMW6dWAdxc\noQMWjkbCw1ESUEhW5BBQ6Qo9WDR5h1BKxu3DUK5nnuOQ6m+AD67JiHgK6nYN\niD0ePDPWDLDPnnvcilBlPy17VdIQOM1LrfWD7YAgnNN5lZTUS3Bk3SmlI/SR\n+89GApq59f6sQ1q7dO8xPMO2jzdO+BvWY2O7raUnhvYhjbFCyZwTKpEvUlb4\nmndt1PUQ9bbJNLhVrdsAvI0Z5yGXdAbgQPY8CJifuYvr/MK0fAAU+/fClFGN\nkiX9yc2d0IiEcpmjWUWdYEh22C6bPqcSJZi22iSI3RIyNwPL9ag9FkpT0xoz\nwdFMxzW4QvhbOAIDWg2f1VgHJniCtcKFX92SwEVc255Zdo0qrMs51HsazzBQ\nx5yqtOZe2h9YHw23PThyE7jRcQ3npbAsc0XAF6pdEtCwaV1vp/ajQQ+Rev/x\nakfG0CcdfUyk4KnNTLgkDX6EarFW6jVxmZ10dXQIQLJBqGaapcgFNyuw3Wvo\n+AFL\r\n=+Iql\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPXoHUApnRKZLrFI/8OU6vmGe7HPvtKVcMOKSxpv+qlQIhAJ/CuC8RLI3q9918jiNfViofB/3ZIQGmVsVZNWQAJ3Xv"}]},"_npmUser":{"name":"taoqf","email":"tao_qiufeng@126.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fd-w000006_4.6.201908051153_1564977237443_0.7346244870794314"},"_hasShrinkwrap":false}},"time":{"created":"2019-05-20T03:19:41.622Z","4.6.201905201119":"2019-05-20T03:19:41.892Z","modified":"2022-04-05T04:16:26.364Z","4.6.201907081014":"2019-07-08T02:15:07.309Z","4.6.201908051153":"2019-08-05T03:53:57.571Z"},"maintainers":[{"email":"tao_qiufeng@126.com","name":"taoqf"}],"description":"日期选择","keywords":["feidao","01feidao","dfeidao","atom","飞道","控件","ai"],"repository":{"type":"git","url":"https://gitee.com/dfeidao/widgets"},"author":{"name":"taoqf","email":"tao_qiufeng@126.com","url":"http://www.01feidao.com/"},"license":"MIT","readme":"# 日期选择\n\n<https://dfeidao.gitee.io/widgets/>\n\n## Installation\n\n```sh\nyarn add --dev @dfeidao/fd-w000006\n```\n\n## Tag\n\n```html\n<fd-w000006></fd-w000006>\n```\n\n## Attributes\n\n### `date-format`\n\n日期格式【string】。例如：yyyy/MM/dd/hh/mm/ss/S\n\n```html\ny 代表： 年份\nq 代表： 季度\nM 代表： 月份\nd 代表： 日\nh 代表： 小时\nm 代表： 分\ns 代表： 秒\nS 代表： 毫秒\n```\n\n### `z-index`\n\n该控件所处的页面层级，为空则默认没有设置。【string】\n\n## Methods\n\n### `show`\n\n> 无参数\n\n控件默认为隐藏状态，调用可使控件显示。\n\n#### html\n\n```html\n<div id=\"fd-w000006-002\" style=\"height: 2rem;background:#52cb06;line-height: 2rem;\"></div>\n<fd-w000006 id=\"fd-w000006-001\" style=\"width:50em;height:30em;display:block;position: absolute;\" z-index=9999 date-format=\"yyyy/MM/dd\"></fd-w000006>\n```\n\n#### js\n\n```javascript\nconst fd_w000006_001 = document.querySelector('#fd-w000006-001');\nconst fd_w000006_002 = document.querySelector('#fd-w000006-002');\n\nfd_w000006_002.addEventListener('click', () => {\n  fd_w000006_001.show();\n});\nfd_w000006_001.addEventListener('fdwe-select-date', (res) => {\n  const start_str = res.start_str;\n  const end_str = res.end_str;\n  const content = start_str + ' - ' + end_str;\n  fd_w000006_002.innerHTML = content;\n});\n```\n\n## Events\n\n### feidao-web事件绑定示例\n\n```html\n<fd-w000006 data-feidao-actions=\"fdwe-select-date:a001\">\n</fd-w000006>\n```\n\n### `fdwe-select-date`\n\n> 返回值示例\n\n```json\n{\"end\": 1521763200000, \"start\": 1520812800000, \"start_str\": \"2018-03-12\", \"end_str\": \"2018-03-23\"}\n```\n\n选择日期区间后，控件发出的事件，输出参数为：end，start，start_str，end_str\n\n## Slot\n\n- [`day`](#day)\n- [`month`](#month)\n- [`year`](#year)\n- [`some`](#some)\n- [`btn-sure`](#btn-sure)\n- [`btn-cancle`](#btn-cancle)\n\n### day\n\n> 在自定义控件内添加新节点，设置其属性为 solt=\"day\" ，即可产生新的日期选择区间。同时需要给新节点添加的属性入下:\n\n 属性名 | 属性值\n -|-|-\n slot | solt=\"day\", 表示以天为单位\n interval  | 设置间隔【string】\n is-before | 设置日期选择区间在前几天或后几天。true之前，false为之后\n\n### month\n\n> 在自定义控件内添加新节点，设置其属性为 solt=\"month\" ，即可产生新的日期选择区间。同时需要给新节点添加的属性入下:\n\n 属性名 | 属性值\n -|-|-\n slot | solt=\"month\", 表示以月为单位\n interval  | 设置间隔【string】\n is-before | 设置日期选择区间在前几月或后几月。true之前，false为之后\n\n### year\n\n> 在自定义控件内添加新节点，设置其属性为 solt=\"year\" ，即可产生新的日期选择区间。同时需要给新节点添加的属性入下:\n\n 属性名 | 属性值\n -|-|-\n slot | solt=\"year\", 表示以年为单位\n interval  | 设置间隔【string】\n is-before | 设置日期选择区间在前几年或后几年。true之前，false为之后\n\n### some\n\n> 在自定义控件内添加新节点，设置其属性为 solt=\"some\" ，即可自定义手输的时间选择框\n\n例:\n\n```html\n<div slot=\"some\">\n  <div>开始</div>\n  <input type=\"date\" name=\"select-start\" />\n  <div>结束</div>\n  <input type=\"date\" name=\"select-end\" />\n</div>\n```\n\n### btn-sure\n\n> 在自定义控件内添加新节点，设置其属性为 solt=\"btn-sure\" ，即可自定义“确定按钮”，自动绑定确定事件，不用使用者再添加绑定事件。\n\n### btn-cancle\n\n> 在自定义控件内添加新节点，设置其属性为 solt=\"btn-cancle\" ，即可自定义“取消按钮”，自动绑定取消事件，不用使用者再添加绑定事件。\n\n## Example\n\n### 设置日期格式\n\n#### html\n\n```html\n<div id=\"fd-w000006-004\" style=\"height: 2rem;background:#52cb06;line-height: 2rem;\"></div>\n<fd-w000006 id=\"fd-w000006-003\" style=\"width:50em;height:30em;display:block;position: absolute;\" date-format=\"yyyy/MM\"></fd-w000006>\n```\n\n#### js\n\n```javaScript\nconst fd_w000006_004 = document.querySelector('#fd-w000006-004');\nconst fd_w000006_003 = document.querySelector('#fd-w000006-003');\n\nfd_w000006_004.addEventListener('click', () => {\n  fd_w000006_003.show();\n});\nfd_w000006_003.addEventListener('fdwe-select-date', (res) => {\n  const start_str = res.start_str;\n  const end_str = res.end_str;\n  const content = start_str + ' - ' + end_str;\n  fd_w000006_004.innerHTML = content;\n});\n```\n\n### 设置页面层级\n\n#### html\n\n```html\n<div id=\"fd-w000006-006\" style=\"height: 2rem;background:#52cb06;line-height: 2rem;\"></div>\n<fd-w000006 id=\"fd-w000006-005\" style=\"width:50em;height:30em;display:block;position: absolute;\" z-index=9999></fd-w000006>\n```\n\n#### js\n\n```javaScript\nconst fd_w000006_006 = document.querySelector('#fd-w000006-006');\nconst fd_w000006_005 = document.querySelector('#fd-w000006-005');\n\nfd_w000006_006.addEventListener('click', () => {\n  fd_w000006_005.show();\n});\nfd_w000006_005.addEventListener('fdwe-select-date', (res) => {\n  const start_str = res.start_str;\n  const end_str = res.end_str;\n  const content = start_str + ' - ' + end_str;\n  fd_w000006_006.innerHTML = content;\n});\n```\n\n### 根据日选择区间\n\n#### html\n\n```html\n<div id=\"fd-w000006-008\" style=\"height: 2rem;background:#52cb06;line-height: 2rem;\"></div>\n<fd-w000006 id=\"fd-w000006-007\" style=\"width:50em;height:30em;display:block;position: absolute;\" date-format=\"yyyy/MM/dd\">\n <div style=\"width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em\" interval=\"1\" is-before=\"true\"\n  slot=\"day\">\n  今天\n </div>\n <div style=\"width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em\" interval=\"2\" is-before=\"true\"\n  slot=\"day\">\n  昨天\n </div>\n <div style=\"width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em\" interval=\"2\" is-before=\"false\"\n  slot=\"day\">\n  明天\n </div>\n <div style=\"width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em\" interval=\"7\" is-before=\"true\"\n  slot=\"day\">\n  过去的7天\n </div>\n <div style=\"width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em\" interval=\"7\" is-before=\"false\"\n  slot=\"day\">\n  未来的7天\n </div>\n <div style=\"width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em\" interval=\"30\" is-before=\"true\"\n  slot=\"day\">\n  过去的30天\n </div>\n <div style=\"width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em\" interval=\"30\" is-before=\"false\"\n  slot=\"day\">\n  未来的30天\n </div>\n</fd-w000006>\n```\n\n#### js\n\n```javaScript\nconst fd_w000006_008 = document.querySelector('#fd-w000006-008');\nconst fd_w000006_007 = document.querySelector('#fd-w000006-007');\n\nfd_w000006_008.addEventListener('click', () => {\n  fd_w000006_007.show();\n});\nfd_w000006_007.addEventListener('fdwe-select-date', (res) => {\n  const start_str = res.start_str;\n  const end_str = res.end_str;\n  const content = start_str + ' - ' + end_str;\n  fd_w000006_008.innerHTML = content;\n});\n```\n\n### 根据月选择区间\n\n#### html\n\n```html\n<div id=\"fd-w000006-010\" style=\"height: 2rem;background:#52cb06;line-height: 2rem;\"></div>\n<fd-w000006 id=\"fd-w000006-009\" style=\"width:50em;height:30em;display:block;position: absolute;\" date-format=\"yyyy/MM/dd\">\n <div style=\"width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em\" interval=\"1\" is-before=\"true\"\n  slot=\"month\">\n  本月\n </div>\n <div style=\"width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em\" interval=\"2\" is-before=\"true\"\n  slot=\"month\">\n  上个月\n </div>\n <div style=\"width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em\" interval=\"2\" is-before=\"false\"\n  slot=\"month\">\n  下个月\n </div>\n <div style=\"width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em\" interval=\"5\" is-before=\"true\"\n  slot=\"month\">\n  过去的5个月\n </div>\n <div style=\"width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em\" interval=\"5\" is-before=\"false\"\n  slot=\"month\">\n  未来的5个月\n </div>\n</fd-w000006>\n```\n\n#### js\n\n```javaScript\nconst fd_w000006_010 = document.querySelector('#fd-w000006-010');\nconst fd_w000006_009 = document.querySelector('#fd-w000006-009');\n\nfd_w000006_010.addEventListener('click', () => {\n  fd_w000006_009.show();\n});\nfd_w000006_009.addEventListener('fdwe-select-date', (res) => {\n  const start_str = res.start_str;\n  const end_str = res.end_str;\n  const content = start_str + ' - ' + end_str;\n  fd_w000006_010.innerHTML = content;\n});\n```\n\n### 根据年选择区间\n\n#### html\n\n```html\n<div id=\"fd-w000006-012\" style=\"height: 2rem;background:#52cb06;line-height: 2rem;\"></div>\n<fd-w000006 id=\"fd-w000006-011\" style=\"width:50em;height:30em;display:block;position: absolute;\" date-format=\"yyyy/MM/dd\">\n <div style=\"width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em\" interval=\"1\" is-before=\"true\"\n  slot=\"year\">\n  本年\n </div>\n <div style=\"width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em\" interval=\"2\" is-before=\"true\"\n  slot=\"year\">\n  上一年\n </div>\n <div style=\"width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em\" interval=\"2\" is-before=\"false\"\n  slot=\"year\">\n  明年\n </div>\n <div style=\"width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em\" interval=\"3\" is-before=\"true\"\n  slot=\"year\">\n  上3年\n </div>\n <div style=\"width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em\" interval=\"3\" is-before=\"false\"\n  slot=\"year\">\n  未来的3年\n </div>\n</fd-w000006>\n```\n\n#### js\n\n```javaScript\nconst fd_w000006_012 = document.querySelector('#fd-w000006-012');\nconst fd_w000006_011 = document.querySelector('#fd-w000006-011');\n\nfd_w000006_012.addEventListener('click', () => {\n  fd_w000006_011.show();\n});\nfd_w000006_011.addEventListener('fdwe-select-date', (res) => {\n  const start_str = res.start_str;\n  const end_str = res.end_str;\n  const content = start_str + ' - ' + end_str;\n  fd_w000006_012.innerHTML = content;\n});\n```\n\n### 自定义选择区间\n\n```text\n自定义中，输入框的类型必须是[date],输入框的name必须固定，开始日期为[select-start]，结束日期为[select-end]\n且两个时间选择器外要有一个 div块， 设置属性 slot=\"some\"\n```\n\n#### html\n\n```html\n<div id=\"fd-w000006-014\" style=\"height: 2rem;background:#52cb06;line-height: 2rem;\"></div>\n<fd-w000006 id=\"fd-w000006-013\" style=\"width:50em;height:30em;display:block;position: absolute;\" date-format=\"yyyy/MM/dd\">\n <div slot=\"some\">\n  <div>开始</div>\n  <input type=\"date\" name=\"select-start\" />\n  <div>结束</div>\n  <input type=\"date\" name=\"select-end\" />\n </div>\n</fd-w000006>\n```\n\n#### js\n\n```javaScript\nconst fd_w000006_014 = document.querySelector('#fd-w000006-014');\nconst fd_w000006_013 = document.querySelector('#fd-w000006-013');\n\nfd_w000006_014.addEventListener('click', () => {\n  fd_w000006_013.show();\n});\nfd_w000006_013.addEventListener('fdwe-select-date', (res) => {\n  const start_str = res.start_str;\n  const end_str = res.end_str;\n  const content = start_str + ' - ' + end_str;\n  fd_w000006_014.innerHTML = content;\n});\n```\n\n### 确定按钮\n\n> 自定义的确定按钮必须具有 solt 属性，solt=\"btn-sure\"\n\n#### html\n\n```html\n<div id=\"fd-w000006-016\" style=\"height: 2rem;background:#52cb06;line-height: 2rem;\"></div>\n<fd-w000006 id=\"fd-w000006-015\" style=\"width:50em;height:30em;display:block;position: absolute;\" date-format=\"yyyy/MM/dd\">\n <div slot=\"btn-sure\" style=\"width: 10em;height: 3em;background: lightgoldenrodyellow;display: block;line-height: 3em;text-align: center;\">确定</div>\n</fd-w000006>\n```\n\n#### js\n\n```javaScript\nconst fd_w000006_016 = document.querySelector('#fd-w000006-016');\nconst fd_w000006_015 = document.querySelector('#fd-w000006-015');\n\nfd_w000006_016.addEventListener('click', () => {\n  fd_w000006_015.show();\n});\nfd_w000006_015.addEventListener('fdwe-select-date', (res) => {\n  const start_str = res.start_str;\n  const end_str = res.end_str;\n  const content = start_str + ' - ' + end_str;\n  fd_w000006_016.innerHTML = content;\n});\n```\n\n### 取消按钮\n\n> 自定义的取消按钮必须具有 solt 属性，solt=\"btn-cancel\"\n\n#### html\n\n```html\n<div id=\"fd-w000006-018\" style=\"height: 2rem;background:#52cb06;line-height: 2rem;\"></div>\n<fd-w000006 id=\"fd-w000006-017\" style=\"width:50em;height:30em;display:block;position: absolute;\" date-format=\"yyyy/MM/dd\">\n <div slot=\"btn-cancle\" style=\"width: 10em;height: 3em;background: lightgoldenrodyellow;display: block;line-height: 3em;text-align: center;\">取消</div>\n</fd-w000006>\n```\n\n#### js\n\n```javaScript\nconst fd_w000006_018 = document.querySelector('#fd-w000006-018');\nconst fd_w000006_017 = document.querySelector('#fd-w000006-017');\n\nfd_w000006_018.addEventListener('click', () => {\n  fd_w000006_017.show();\n});\nfd_w000006_017.addEventListener('fdwe-select-date', (res) => {\n  const start_str = res.start_str;\n  const end_str = res.end_str;\n  const content = start_str + ' - ' + end_str;\n  fd_w000006_018.innerHTML = content;\n});\n```\n\n### 完整功能示例\n\n#### html\n\n传入要测试的控件的html代码。例：\n\n```html\n<div id=\"fd-w000006-020\" style=\"height: 2rem;background:#52cb06;line-height: 2rem;\"></div>\n\n<fd-w000006 id=\"fd-w000006-019\" style=\"width:50em;height:30em;display:block;position: absolute;\" z-index=9999 date-format=\"yyyy/MM/dd\">\n  <div style=\"width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em\" interval=\"1\" is-before=\"true\"\n    slot=\"day\">\n    今天\n  </div>\n  <div style=\"width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em\" interval=\"2\" is-before=\"true\"\n    slot=\"day\">\n    昨天\n  </div>\n  <div style=\"width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em\" interval=\"2\" is-before=\"false\"\n    slot=\"day\">\n    明天\n  </div>\n  <div style=\"width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em\" interval=\"7\" is-before=\"true\"\n    slot=\"day\">\n    过去的7天\n  </div>\n  <div style=\"width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em\" interval=\"7\" is-before=\"false\"\n    slot=\"day\">\n    未来的7天\n  </div>\n  <div style=\"width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em\" interval=\"30\" is-before=\"true\"\n    slot=\"day\">\n    过去的30天\n  </div>\n  <div style=\"width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em\" interval=\"30\" is-before=\"false\"\n    slot=\"day\">\n    未来的30天\n  </div>\n  <div style=\"width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em\" interval=\"1\" is-before=\"true\"\n    slot=\"month\">\n    本月\n  </div>\n  <div style=\"width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em\" interval=\"2\" is-before=\"true\"\n    slot=\"month\">\n    上个月\n  </div>\n  <div style=\"width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em\" interval=\"2\" is-before=\"false\"\n    slot=\"month\">\n    下个月\n  </div>\n  <div style=\"width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em\" interval=\"5\" is-before=\"true\"\n    slot=\"month\">\n    过去的5个月\n  </div>\n  <div style=\"width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em\" interval=\"5\" is-before=\"false\"\n    slot=\"month\">\n    未来的5个月\n  </div>\n  <div style=\"width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em\" interval=\"1\" is-before=\"true\"\n    slot=\"year\">\n    本年\n  </div>\n  <div style=\"width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em\" interval=\"2\" is-before=\"true\"\n    slot=\"year\">\n    上一年\n  </div>\n  <div style=\"width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em\" interval=\"2\" is-before=\"false\"\n    slot=\"year\">\n    明年\n  </div>\n  <div style=\"width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em\" interval=\"3\" is-before=\"true\"\n    slot=\"year\">\n    上3年\n  </div>\n  <div style=\"width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em\" interval=\"3\" is-before=\"false\"\n    slot=\"year\">\n    未来的3年\n  </div>\n  <button slot=\"btn-sure\" style=\"width:80px;\n            height:28px;\n            background:#444;\n            border:1px solid #444;\n            border-radius:4px;\n            color:#fff;\n            margin-left: 2px;\">确定</button>\n  <button slot=\"btn-cancle\" style=\"width:80px;height:30px;\n            border:1px solid rgb(197, 110, 110);\n            border-radius:4px;\n            background:#fff;\n            margin-left:13px;\n            margin-top: 10px;\n            margin-bottom: 5px;\">取消</button>\n  <div slot=\"some\">\n    <div>开始</div>\n    <input type=\"date\" name=\"select-start\" />\n    <div>结束</div>\n    <input type=\"date\" name=\"select-end\" />\n  </div>\n</fd-w000006>\n\n<div id=\"fd-w000006-021\" style=\"width:100%;height:500px;background:#e9eeee;\">\n</div>\n```\n\n#### js\n\n传入要测试的控件的js代码。例：\n\n```javascript\nconst fd_w000006_020 = document.querySelector('#fd-w000006-020');\nconst fd_w000006_019 = document.querySelector('#fd-w000006-019');\nconst fd_w000006_021 = document.querySelector('#fd-w000006-021');\n\nfd_w000006_020.addEventListener('click', () => {\n  fd_w000006_019.show();\n});\n\nfd_w000006_019.addEventListener('fdwe-select-date', (res) => {\n  const start_str = res.start_str;\n  const end_str = res.end_str;\n  const content = start_str + ' - ' + end_str;\n  fd_w000006_020.innerHTML = content;\n});\n\nfd_w000006_021.addEventListener('click', (res) => {\n  if (fd_w000006_019.widget_hide === false) {\n    fd_w000006_019.hide();\n  }\n});\n```\n","readmeFilename":"readme.md"}