114 lines
7.6 KiB
JSON
114 lines
7.6 KiB
JSON
{
|
||
"slug": "datetimepicker",
|
||
"mode": "scenarios",
|
||
"curated": true,
|
||
"examples": [
|
||
{
|
||
"id": "datetimepicker-ex-1",
|
||
"title": "默认与常用变体",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"demo-block\">\n <div class=\"row kole-datetimepicker\">\n <label class=\"kole-datetimepicker-item\">\n 生效时间\n <input class=\"kole-datetimepicker-control\" type=\"datetime-local\" aria-label=\"生效时间\" value=\"2026-09-20T09:30\" />\n </label>\n </div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
2
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
3
|
||
],
|
||
[
|
||
0,
|
||
2,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-datetimepicker\">\n <label class=\"kole-datetimepicker-item\">\n 生效时间\n <input class=\"kole-datetimepicker-control\" type=\"datetime-local\" aria-label=\"生效时间\" value=\"2026-09-20T09:30\" />\n </label>\n</div>",
|
||
"jsx": "import { useState } from 'react';\nimport { KoleDateTimePicker } from 'kole-ui/react';\n\nexport default function Demo() {\n const [value, setValue] = useState('2026-09-20T09:30');\n\n return <KoleDateTimePicker value={value} format=\"YYYY-MM-DD HH:mm\" onChange={setValue} />;\n}",
|
||
"vue3": "<template>\n <KoleDateTimePicker :value=\"value\" format=\"YYYY-MM-DD HH:mm\" @change=\"onChange\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleDateTimePicker } from 'kole-ui/vue3';\n\nconst value = ref('2026-09-20T09:30');\n\nfunction onChange(next) {\n value.value = next;\n}\n</script>",
|
||
"vue2": "<template>\n <KoleDateTimePicker :value=\"value\" format=\"YYYY-MM-DD HH:mm\" @change=\"onChange\" />\n</template>\n\n<script>\nimport { KoleDateTimePicker } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleDateTimePicker },\n data() {\n return { value: '2026-09-20T09:30' };\n },\n methods: {\n onChange(next) {\n this.value = next;\n },\n },\n};\n</script>",
|
||
"tsx": "import { useState } from 'react';\nimport { KoleDateTimePicker } from 'kole-ui/react';\n\nexport default function Demo(): JSX.Element {\n const [value, setValue] = useState<string>('2026-09-20T09:30');\n\n return <KoleDateTimePicker value={value} format=\"YYYY-MM-DD HH:mm\" onChange={setValue} />;\n}",
|
||
"vue3ts": "<template>\n\n <KoleDateTimePicker :value=\"value\" format=\"YYYY-MM-DD HH:mm\" @change=\"onChange\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleDateTimePicker } from 'kole-ui/vue3';\n\nconst value = ref<string>('2026-09-20T09:30');\n\nfunction onChange(next) {\n value.value = next;\n}\n</script>",
|
||
"vue2ts": "<template>\n\n <KoleDateTimePicker :value=\"value\" format=\"YYYY-MM-DD HH:mm\" @change=\"onChange\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleDateTimePicker } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleDateTimePicker },\n data(): Record<string, unknown> {\n return { value: '2026-09-20T09:30' };\n },\n methods: {\n onChange(next) {\n this.value = next;\n },\n },\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/DateTimePicker.html:5 第一个 demo-block 的 label.kole-datetimepicker-item（「生效时间」+ input[type=datetime-local] value=2026-09-20T09:30）；prop 取 frameworks/DateTimePicker.jsx:4 的 value、format"
|
||
]
|
||
},
|
||
{
|
||
"id": "datetimepicker-ex-2",
|
||
"title": "状态与使用场景",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"demo-block\">\n <div class=\"row kole-datetimepicker\">\n <div class=\"kole-datetimepicker-surface\" style=\"padding:12px\">设置精确到时分的预约、生效或发布时刻。</div>\n <span class=\"kole-datetimepicker-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n </div>\n <p class=\"demo-note\">零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
3
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
2
|
||
],
|
||
[
|
||
0,
|
||
3,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-datetimepicker\">\n <div class=\"kole-datetimepicker-surface\" style=\"padding:12px\">设置精确到时分的预约、生效或发布时刻。</div>\n <span class=\"kole-datetimepicker-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n</div>\n<p>零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>",
|
||
"jsx": "import { KoleDateTimePicker } from 'kole-ui/react';\n\nconst publishAt = '2026-09-20T09:30';\n\n<>\n <span className=\"kole-datetimepicker-desc\">设置精确到时分的预约、生效或发布时刻。</span>\n <KoleDateTimePicker value={publishAt} format=\"YYYY-MM-DD HH:mm\" />\n</>",
|
||
"vue3": "<template>\n <div class=\"kole-datetimepicker-row\">\n <span class=\"kole-datetimepicker-desc\">设置精确到时分的预约、生效或发布时刻。</span>\n <KoleDateTimePicker :value=\"publishAt\" format=\"YYYY-MM-DD HH:mm\" />\n </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleDateTimePicker } from 'kole-ui/vue3';\n\nconst publishAt = ref('2026-09-20T09:30');\n</script>",
|
||
"vue2": "<template>\n <div class=\"kole-datetimepicker-row\">\n <span class=\"kole-datetimepicker-desc\">设置精确到时分的预约、生效或发布时刻。</span>\n <KoleDateTimePicker :value=\"publishAt\" format=\"YYYY-MM-DD HH:mm\" />\n </div>\n</template>\n\n<script>\nimport { KoleDateTimePicker } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleDateTimePicker },\n data() {\n return { publishAt: '2026-09-20T09:30' };\n },\n};\n</script>",
|
||
"tsx": "import { KoleDateTimePicker } from 'kole-ui/react';\n\nexport default function KoleDateTimePickerDemo(): JSX.Element {\n const publishAt = '2026-09-20T09:30';\n return (\n <>\n <span className=\"kole-datetimepicker-desc\">设置精确到时分的预约、生效或发布时刻。</span>\n <KoleDateTimePicker value={publishAt} format=\"YYYY-MM-DD HH:mm\" />\n </>\n );\n}",
|
||
"vue3ts": "<template>\n\n <div class=\"kole-datetimepicker-row\">\n <span class=\"kole-datetimepicker-desc\">设置精确到时分的预约、生效或发布时刻。</span>\n <KoleDateTimePicker :value=\"publishAt\" format=\"YYYY-MM-DD HH:mm\" />\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleDateTimePicker } from 'kole-ui/vue3';\n\nconst publishAt = ref<string>('2026-09-20T09:30');\n</script>",
|
||
"vue2ts": "<template>\n\n <div class=\"kole-datetimepicker-row\">\n <span class=\"kole-datetimepicker-desc\">设置精确到时分的预约、生效或发布时刻。</span>\n <KoleDateTimePicker :value=\"publishAt\" format=\"YYYY-MM-DD HH:mm\" />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleDateTimePicker } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleDateTimePicker },\n data(): Record<string, unknown> {\n return { publishAt: '2026-09-20T09:30' };\n },\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/DateTimePicker.html:5 第二个 demo-block（span.kole-datetimepicker-desc 说明文案）与同页 input[type=datetime-local] 的 2026-09-20T09:30 取值；format 取 frameworks/DateTimePicker.jsx:4 默认值 YYYY-MM-DD HH:mm"
|
||
]
|
||
}
|
||
]
|
||
}
|