Date Range Picker
Tier 2: Light-DOMAPG compliant dual-calendar date range picker with presets and hover highlight
Installation
$npx nnui add date-range-picker
copy$npm install nnui-kit
copyInteractive Preview & Code
Cross-Tab Sync:
sync="cross-tab" + persist="local"
Selected Range: None
<!-- Platform Innovations Live Banner -->
<div style="background: rgba(99, 102, 241, 0.08); border: 1px solid rgba(99, 102, 241, 0.2); border-radius: var(--ui-radius-md); padding: 0.65rem 1rem; width: 100%; max-width: 380px; display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; gap: 0.5rem; flex-wrap: wrap;">
<div style="display: flex; align-items: center; gap: 0.5rem;">
<span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ui-color-brand-500);"></span>
<span style="color: var(--ui-text-primary); font-weight: 600;">Cross-Tab Sync:</span>
<span style="color: var(--ui-text-secondary);"><code style="color: var(--ui-color-brand-400);">sync="cross-tab"</code> + <code style="color: var(--ui-color-brand-400);">persist="local"</code></span>
</div>
<button type="button" class="ui-button ui-button--secondary" onclick="window.nnuiInspect(document.getElementById('demo-range-picker'))" style="padding: 0.2rem 0.6rem; font-size: 0.75rem; height: 26px;">
🤖 Inspect AI Schema
</button>
</div>
<div style="width: 100%; max-width: 380px;">
<label data-ui="label" for="demo-range-picker" style="margin-bottom: 0.5rem; display: block; font-weight: 600;">Select Travel Period</label>
<ui-date-range-picker id="demo-range-picker" placeholder="Select dates..." persist="local" sync="cross-tab"></ui-date-range-picker>
</div>
<div id="range-output-card" data-ui="card" style="padding: 1rem 1.5rem; width: 100%; max-width: 380px; text-align: center; font-size: 0.85rem; color: var(--ui-text-secondary);">
Selected Range: <strong id="range-display-text" style="color: var(--ui-color-brand-600);">None</strong>
</div>import React, { useState } from 'react';
import 'nnui-kit'; // Registers universal Light-DOM elements
export default function DaterangepickerDemo() {
const [tab, setTab] = useState('all');
const [val, setVal] = useState(50);
const [selected, setSelected] = useState('');
const [query, setQuery] = useState('');
return (
<!-- Platform Innovations Live Banner -->
<div style="background: rgba(99, 102, 241, 0.08); border: 1px solid rgba(99, 102, 241, 0.2); border-radius: var(--ui-radius-md); padding: 0.65rem 1rem; width: 100%; max-width: 380px; display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; gap: 0.5rem; flex-wrap: wrap;">
<div style="display: flex; align-items: center; gap: 0.5rem;">
<span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ui-color-brand-500);"></span>
<span style="color: var(--ui-text-primary); font-weight: 600;">Cross-Tab Sync:</span>
<span style="color: var(--ui-text-secondary);"><code style="color: var(--ui-color-brand-400);">sync="cross-tab"</code> + <code style="color: var(--ui-color-brand-400);">persist="local"</code></span>
</div>
<button type="button" className="ui-button ui-button--secondary" onclick="window.nnuiInspect(document.getElementById('demo-range-picker'))" style="padding: 0.2rem 0.6rem; font-size: 0.75rem; height: 26px;">
🤖 Inspect AI Schema
</button>
</div>
<div style="width: 100%; max-width: 380px;">
<label data-ui="label" htmlFor="demo-range-picker" style="margin-bottom: 0.5rem; display: block; font-weight: 600;">Select Travel Period</label>
<ui-date-range-picker id="demo-range-picker" placeholder="Select dates..." persist="local" sync="cross-tab"></ui-date-range-picker>
</div>
<div id="range-output-card" data-ui="card" style="padding: 1rem 1.5rem; width: 100%; max-width: 380px; text-align: center; font-size: 0.85rem; color: var(--ui-text-secondary);">
Selected Range: <strong id="range-display-text" style="color: var(--ui-color-brand-600);">None</strong>
</div>
);
}<script setup>
import { ref } from 'vue';
import 'nnui-kit'; // Registers universal Light-DOM elements
const activeTab = ref('all');
const sliderValue = ref(50);
const selected = ref('');
const query = ref('');
const handleSelect = (val) => {
console.log('Selected:', val);
};
</script>
<template>
<!-- Platform Innovations Live Banner -->
<div style="background: rgba(99, 102, 241, 0.08); border: 1px solid rgba(99, 102, 241, 0.2); border-radius: var(--ui-radius-md); padding: 0.65rem 1rem; width: 100%; max-width: 380px; display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; gap: 0.5rem; flex-wrap: wrap;">
<div style="display: flex; align-items: center; gap: 0.5rem;">
<span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ui-color-brand-500);"></span>
<span style="color: var(--ui-text-primary); font-weight: 600;">Cross-Tab Sync:</span>
<span style="color: var(--ui-text-secondary);"><code style="color: var(--ui-color-brand-400);">sync="cross-tab"</code> + <code style="color: var(--ui-color-brand-400);">persist="local"</code></span>
</div>
<button type="button" class="ui-button ui-button--secondary" onclick="window.nnuiInspect(document.getElementById('demo-range-picker'))" style="padding: 0.2rem 0.6rem; font-size: 0.75rem; height: 26px;">
🤖 Inspect AI Schema
</button>
</div>
<div style="width: 100%; max-width: 380px;">
<label data-ui="label" for="demo-range-picker" style="margin-bottom: 0.5rem; display: block; font-weight: 600;">Select Travel Period</label>
<ui-date-range-picker id="demo-range-picker" placeholder="Select dates..." persist="local" sync="cross-tab"></ui-date-range-picker>
</div>
<div id="range-output-card" data-ui="card" style="padding: 1rem 1.5rem; width: 100%; max-width: 380px; text-align: center; font-size: 0.85rem; color: var(--ui-text-secondary);">
Selected Range: <strong id="range-display-text" style="color: var(--ui-color-brand-600);">None</strong>
</div>
</template><script>
import 'nnui-kit';
let activeTab = $state('all');
let sliderValue = $state(50);
let selected = $state('');
</script>
<!-- Platform Innovations Live Banner -->
<div style="background: rgba(99, 102, 241, 0.08); border: 1px solid rgba(99, 102, 241, 0.2); border-radius: var(--ui-radius-md); padding: 0.65rem 1rem; width: 100%; max-width: 380px; display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; gap: 0.5rem; flex-wrap: wrap;">
<div style="display: flex; align-items: center; gap: 0.5rem;">
<span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ui-color-brand-500);"></span>
<span style="color: var(--ui-text-primary); font-weight: 600;">Cross-Tab Sync:</span>
<span style="color: var(--ui-text-secondary);"><code style="color: var(--ui-color-brand-400);">sync="cross-tab"</code> + <code style="color: var(--ui-color-brand-400);">persist="local"</code></span>
</div>
<button type="button" class="ui-button ui-button--secondary" onclick="window.nnuiInspect(document.getElementById('demo-range-picker'))" style="padding: 0.2rem 0.6rem; font-size: 0.75rem; height: 26px;">
🤖 Inspect AI Schema
</button>
</div>
<div style="width: 100%; max-width: 380px;">
<label data-ui="label" for="demo-range-picker" style="margin-bottom: 0.5rem; display: block; font-weight: 600;">Select Travel Period</label>
<ui-date-range-picker id="demo-range-picker" placeholder="Select dates..." persist="local" sync="cross-tab"></ui-date-range-picker>
</div>
<div id="range-output-card" data-ui="card" style="padding: 1rem 1.5rem; width: 100%; max-width: 380px; text-align: center; font-size: 0.85rem; color: var(--ui-text-secondary);">
Selected Range: <strong id="range-display-text" style="color: var(--ui-color-brand-600);">None</strong>
</div>How to Utilize
NNUI-KIT components live directly in the document Light DOM. You can use them via declarative HTML, with our first-class React wrapper, or platform-natively in Svelte, Vue, Astro, and HTMX:
React 18 & 19 (Next.js 15 App Router)
import 'nnui-kit/css';
import 'nnui-kit/client';
import { DateRangePicker } from 'nnui-kit/react';Universal Web Components (Vue 3, Svelte 5, Astro, HTMX)
<!-- Automatically registers <ui-date-range-picker> and <nnui-date-range-picker> -->
import 'nnui-kit/css';
import 'nnui-kit/client';Platform Features
Zero Shadow DOM
Element lives in the Light DOM. Tailwind and global CSS apply directly.
persist="url | local"
Add declarative persistence attribute to auto-sync state with URL search params.
sync="cross-tab"
Synchronize changes across all open browser tabs via BroadcastChannel.