DatePicker

<!-- Paste-and-run: save as .html and open in a browser. No build step, no bundler.
     DatePicker is a COMPOSITE (antd, no framework-free element), so its HTML form is a
     CDN-React page — React + antd load from a CDN (esm.sh) and mount on open. It
     consumes the SAME shared `datepickerTheme` the React/Vue wrappers use, so it renders
     the DS V3 look (32px field, radius 8, #E3E3E3 border, brand-selected cell).
     Shows the matrix: picker granularity, size, status, showTime, range + presets, disabled.
     No JSX here (JSX needs a compiler) — we use React.createElement via the `h` alias. -->
<div id="root"></div>
<script type="module">
  import React from 'https://esm.sh/react@18';
  import { createRoot } from 'https://esm.sh/react-dom@18/client';
  import dayjs from 'https://esm.sh/dayjs@1';
  import { ConfigProvider, DatePicker } from 'https://esm.sh/antd@6?deps=react@18,react-dom@18';
  import { datepickerTheme } from 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/datepicker-theme.js';

  const h = React.createElement;
  const { RangePicker } = DatePicker;
  const presets = [
    { label: 'Last 7 days', value: [dayjs().add(-7, 'd'), dayjs()] },
    { label: 'Last 30 days', value: [dayjs().add(-30, 'd'), dayjs()] },
  ];

  createRoot(document.getElementById('root')).render(
    h(ConfigProvider, { theme: datepickerTheme },
      h('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
        // Granularity + size (small | middle | large)
        h(DatePicker, { defaultValue: dayjs(), placeholder: 'Pick a date', allowClear: true, style: { width: 240 } }),
        h(DatePicker, { picker: 'month', size: 'large', placeholder: 'Pick a month', style: { width: 240 } }),
        // Date + time
        h(DatePicker, { showTime: true, placeholder: 'Pick date & time', style: { width: 260 } }),
        // Validation state
        h(DatePicker, { status: 'error', placeholder: 'Required', style: { width: 240 } }),
        // Range with quick presets
        h(RangePicker, { presets: presets, style: { width: 300 } }),
        // Disabled
        h(DatePicker, { disabled: true, defaultValue: dayjs(), style: { width: 240 } })
      )
    )
  );
</script>

import { ConfigProvider, DatePicker } from 'antd';   // antd v6
import dayjs from 'dayjs';
import { datepickerTheme } from '@ahaslides-product/design/datepicker-theme';

const { RangePicker } = DatePicker;

const presets = [
  { label: 'Last 7 days', value: [dayjs().add(-7, 'd'), dayjs()] },
  { label: 'Last 30 days', value: [dayjs().add(-30, 'd'), dayjs()] },
];

<ConfigProvider theme={datepickerTheme}>
  {/* Granularity: picker="date | week | month | quarter | year" */}
  <DatePicker
    picker="date"
    size="middle"            {/* small | middle | large → 24 / 32 / 40 */}
    defaultValue={dayjs()}
    placeholder="Pick a date"
    allowClear
    disabledDate={(d) => d && d < dayjs().startOf('day')}
    onChange={setDate}
    style={{ width: 240 }}
  />

  {/* Date + time */}
  <DatePicker showTime placeholder="Pick date & time" onChange={setDate} />

  {/* Validation state on the field */}
  <DatePicker status="error" placeholder="Required" onChange={setDate} />

  {/* A start + end together — with quick presets for reporting windows */}
  <RangePicker presets={presets} onChange={setRange} style={{ width: 300 }} />

  {/* Disabled */}
  <DatePicker disabled defaultValue={dayjs()} />
</ConfigProvider>
// One shared datepickerTheme → the DS V3 look; use disabledDate to constrain, not post-validation.

<script setup>
import { ref } from 'vue';
import { ConfigProvider, DatePicker, RangePicker } from 'ant-design-vue';   // ant-design-vue v4
import dayjs from 'dayjs';
import { datepickerTheme } from '@ahaslides-product/design/datepicker-theme';

const date = ref(dayjs());
const range = ref();
const presets = [
  { label: 'Last 7 days', value: [dayjs().add(-7, 'd'), dayjs()] },
  { label: 'Last 30 days', value: [dayjs().add(-30, 'd'), dayjs()] },
];
const disabledDate = (d) => d && d < dayjs().startOf('day');
</script>

<template>
  <a-config-provider :theme="datepickerTheme">
    <!-- Granularity: picker="date | week | month | quarter | year"; size small|middle|large -->
    <a-date-picker v-model:value="date" picker="date" size="middle"
      placeholder="Pick a date" allow-clear :disabled-date="disabledDate" style="width: 240px" />

    <!-- Date + time -->
    <a-date-picker show-time placeholder="Pick date & time" />

    <!-- Validation state -->
    <a-date-picker status="error" placeholder="Required" />

    <!-- Range with quick presets -->
    <a-range-picker v-model:value="range" :presets="presets" style="width: 300px" />

    <!-- Disabled -->
    <a-date-picker :value="date" disabled />
  </a-config-provider>
</template>
<!-- The SAME datepickerTheme as React → one DS V3 look across both vendor libraries. -->

// @ahaslides-product/design/datepicker-theme — declared ONCE, consumed by both tiers.
import { datepickerTheme } from '@ahaslides-product/design/datepicker-theme';

export const datepickerTheme = {
  token: {
    colorPrimary: '#6A1EBB',
    borderRadius: 8,
    controlHeight: 32,
    colorBorder: '#E3E3E3',
    colorTextPlaceholder: '#8A8A8A',
    fontFamily: 'var(--aha-font-product, "Plus Jakarta Sans", sans-serif)',
  },
  components: {
    DatePicker: {
      borderRadius: 8,
      controlHeight: 32,
      cellActiveWithRangeBg: '#F9F5FF',   // brand-tint in-range cells
      cellHoverBg: '#F7F7F7',
    },
  },
};