{
 "slug": "rangequickpicker",
 "curated": true,
 "mode": "single",
 "examples": [
  {
   "id": "rangequickpicker-ex-1",
   "title": "基础用法",
   "titleSrc": "",
   "desc": "",
   "html": "<div class=\"kole-page\">\n  <h2 class=\"kole-h2\">RangeQuickPicker 日期范围快捷选择</h2>\n  <p class=\"kole-desc\">内置快捷选项（今天、近7天、本月等），也支持自定义起止日期。</p>\n  <div class=\"kole-demo\">\n    <div class=\"kole-demo__title\">报表时间筛选</div>\n    <div class=\"kole-range\" id=\"range\">\n      <div class=\"kole-range-trigger\" id=\"trigger\" role=\"button\" tabindex=\"0\" aria-expanded=\"false\" aria-haspopup=\"listbox\">\n        <span class=\"kole-range-placeholder\" id=\"label\" role=\"button\" tabindex=\"0\">请选择时间范围</span>\n      </div>\n      <div class=\"kole-range-pop\" id=\"pop\" style=\"display:none\">\n        <div class=\"kole-range-presets\" id=\"presets\"></div>\n        <div class=\"kole-range-custom\">\n          <input id=\"start\" type=\"date\" />\n          <span class=\"kole-range-tilde\">~</span>\n          <input id=\"end\" type=\"date\" />\n        </div>\n        <div class=\"kole-range-actions\">\n          <button class=\"kole-range-cancel\" id=\"cancel\">取消</button>\n          <button class=\"kole-range-ok\" id=\"ok\">确定</button>\n        </div>\n      </div>\n    </div>\n    <p class=\"kole-code-tip\" id=\"out\"></p>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      0
     ]
    ],
    "hide": [],
    "mode": "single"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<h2>RangeQuickPicker 日期范围快捷选择</h2>\n<p>内置快捷选项（今天、近7天、本月等），也支持自定义起止日期。</p>\n<div>报表时间筛选</div>\n<div class=\"kole-range\">\n  <div class=\"kole-range-trigger\" role=\"button\" tabindex=\"0\" aria-expanded=\"false\" aria-haspopup=\"listbox\">\n    <span class=\"kole-range-placeholder\" role=\"button\" tabindex=\"0\">请选择时间范围</span>\n  </div>\n  <div class=\"kole-range-pop\" style=\"display:none\">\n    <div class=\"kole-range-presets\"></div>\n    <div class=\"kole-range-custom\">\n      <input type=\"date\" />\n      <span class=\"kole-range-tilde\">~</span>\n      <input type=\"date\" />\n    </div>\n    <div class=\"kole-range-actions\">\n      <button class=\"kole-range-cancel\">取消</button>\n      <button class=\"kole-range-ok\">确定</button>\n    </div>\n  </div>\n</div>\n<p></p>",
    "jsx": "import { useState } from 'react';\nimport { KoleRangeQuickPicker } from 'kole-ui/react';\n\nconst presets = [\n  { label: '今天', days: 0 },\n  { label: '昨天', days: -1, len: 1 },\n  { label: '近7天', days: -6 },\n  { label: '近30天', days: -29 },\n  { label: '本月', month: 'this' },\n  { label: '上月', month: 'last' },\n  { label: '本年', year: 'this' }\n];\n\nexport default function Demo() {\n  const [range, setRange] = useState({ start: '', end: '' });\n  return <KoleRangeQuickPicker presets={presets} modelValue={range} onChange={setRange} />;\n}",
    "vue3": "<script setup>\nimport { ref } from 'vue';\nimport { KoleRangeQuickPicker } from 'kole-ui/vue3';\n\nconst presets = [\n  { label: '今天', days: 0 },\n  { label: '昨天', days: -1, len: 1 },\n  { label: '近7天', days: -6 },\n  { label: '近30天', days: -29 },\n  { label: '本月', month: 'this' },\n  { label: '上月', month: 'last' },\n  { label: '本年', year: 'this' }\n];\nconst range = ref({ start: '', end: '' });\n</script>\n\n<template>\n  <KoleRangeQuickPicker :presets=\"presets\" v-model=\"range\" />\n</template>",
    "vue2": "<template>\n  <KoleRangeQuickPicker :presets=\"presets\" :model-value=\"range\" @update:model-value=\"range = $event\" />\n</template>\n\n<script>\nimport { KoleRangeQuickPicker } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleRangeQuickPicker },\n  data() {\n    return {\n      presets: [\n        { label: '今天', days: 0 },\n        { label: '昨天', days: -1, len: 1 },\n        { label: '近7天', days: -6 },\n        { label: '近30天', days: -29 },\n        { label: '本月', month: 'this' },\n        { label: '上月', month: 'last' },\n        { label: '本年', year: 'this' }\n      ],\n      range: { start: '', end: '' }\n    };\n  }\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleRangeQuickPicker } from 'kole-ui/react';\n\nconst presets = [\n  { label: '今天', days: 0 },\n  { label: '昨天', days: -1, len: 1 },\n  { label: '近7天', days: -6 },\n  { label: '近30天', days: -29 },\n  { label: '本月', month: 'this' },\n  { label: '上月', month: 'last' },\n  { label: '本年', year: 'this' }\n];\n\nexport default function Demo(): JSX.Element {\n  const [range, setRange] = useState({ start: '', end: '' });\n  return <KoleRangeQuickPicker presets={presets} modelValue={range} onChange={setRange} />;\n}",
    "vue3ts": "<template>\n\n  <KoleRangeQuickPicker :presets=\"presets\" v-model=\"range\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleRangeQuickPicker } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('基础用法');\nconst presets = [\n  { label: '今天', days: 0 },\n  { label: '昨天', days: -1, len: 1 },\n  { label: '近7天', days: -6 },\n  { label: '近30天', days: -29 },\n  { label: '本月', month: 'this' },\n  { label: '上月', month: 'last' },\n  { label: '本年', year: 'this' }\n];\nconst range = ref({ start: '', end: '' });\n</script>",
    "vue2ts": "<template>\n\n  <KoleRangeQuickPicker :presets=\"presets\" :model-value=\"range\" @update:model-value=\"range = $event\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleRangeQuickPicker } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleRangeQuickPicker },\n  data(): Record<string, unknown> {\n    return {\n      presets: [\n        { label: '今天', days: 0 },\n        { label: '昨天', days: -1, len: 1 },\n        { label: '近7天', days: -6 },\n        { label: '近30天', days: -29 },\n        { label: '本月', month: 'this' },\n        { label: '上月', month: 'last' },\n        { label: '本年', year: 'this' }\n      ],\n      range: { start: '', end: '' }\n    };\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/RangeQuickPicker.html 第 39-47 行 PRESETS 的 7 条内置快捷项（label + days/len/month/year）与第 19 行触发器的「请选择时间范围」占位、第 68 行 cur = { start: \"\", end: \"\" } 的初值。",
    "prop 名见 frameworks/RangeQuickPicker.jsx 第 33 行参数表（modelValue / presets / onChange）与 frameworks/RangeQuickPicker.vue3.vue 第 46-60 行 defineProps。Vue2 端（RangeQuickPicker.vue2.vue 第 55-69、79 行）prop 为 modelValue、只 emit update:modelValue，未声明 model，故写 :model-value + @update:model-value 而非 v-model。"
   ]
  }
 ]
}