refactor(emcn): retire legacy DatePicker; migrate all consumers to the chip calendar

Removes the parallel DatePicker component (its own dual-month CalendarMonth,
hardcoded colors, non-chip chrome) so the chip Calendar is the single date
surface. Migrates every consumer:

- tables row modal -> ChipDatePicker (single)
- tables inline grid editor, logs filter, ee audit-logs filter -> canonical
  Calendar inside an emcn Popover (the same headless/anchored pattern
  DatePicker rendered internally; single for the grid cell, range+time for the
  log filters)
- playground -> ChipDatePicker showcase (single, range, range+time)

The range bounds keep the exact YYYY-MM-DD / YYYY-MM-DDTHH:mm wire format, so
the log filters' parsing is unchanged. Calendar is imported via its component
path (the emcn barrel already exports a Calendar icon).

Author: waleedlatif1

apps/sim/app/playground/page.tsx

@@ -16,11 +16,11 @@ import {
   Card as CardIcon,
   Checkbox,
   ChevronDown,
+  ChipDatePicker,
   Code,
   Combobox,
   Connections,
   Cursor,
-  DatePicker,
   DocumentAttachment,
   Download,
   Duplicate,
@@ -772,43 +772,57 @@ export default function PlaygroundPage() {
               </VariantRow>
             </Section>
 
-            {/* DatePicker */}
-            <Section title='DatePicker'>
+            {/* ChipDatePicker */}
+            <Section title='ChipDatePicker'>
               <VariantRow label='single date'>
                 <div className='w-56'>
-                  <DatePicker value={dateValue} onChange={setDateValue} placeholder='Select date' />
+                  <ChipDatePicker
+                    value={dateValue}
+                    onChange={setDateValue}
+                    placeholder='Select date'
+                    fullWidth
+                  />
                 </div>
                 <span className='text-[var(--text-secondary)] text-sm'>
                   {dateValue || 'No date'}
                 </span>
               </VariantRow>
-              <VariantRow label='size sm'>
-                <div className='w-56'>
-                  <DatePicker placeholder='Small size' size='sm' onChange={() => {}} />
+              <VariantRow label='range mode'>
+                <div className='w-72'>
+                  <ChipDatePicker
+                    mode='range'
+                    startDate={dateRangeStart}
+                    endDate={dateRangeEnd}
+                    onRangeChange={(start, end) => {
+                      setDateRangeStart(start)
+                      setDateRangeEnd(end)
+                    }}
+                    placeholder='Select date range'
+                    fullWidth
+                  />
                 </div>
               </VariantRow>
-              <VariantRow label='range mode'>
+              <VariantRow label='range mode (with time)'>
                 <div className='w-72'>
-                  <DatePicker
+                  <ChipDatePicker
                     mode='range'
+                    showTime
                     startDate={dateRangeStart}
                     endDate={dateRangeEnd}
                     onRangeChange={(start, end) => {
                       setDateRangeStart(start)
                       setDateRangeEnd(end)
                     }}
                     placeholder='Select date range'
+                    fullWidth
                   />
                 </div>
               </VariantRow>
               <VariantRow label='disabled'>
                 <div className='w-56'>
-                  <DatePicker value='2025-01-15' disabled />
+                  <ChipDatePicker value='2025-01-15' disabled fullWidth />
                 </div>
               </VariantRow>
-              <VariantRow label='inline'>
-                <DatePicker inline value={dateValue} onChange={setDateValue} />
-              </VariantRow>
             </Section>
 
             {/* Tooltip */}

apps/sim/app/workspace/[workspaceId]/logs/logs.tsx

@@ -17,11 +17,14 @@ import {
   Button,
   ChipCombobox,
   type ComboboxOption,
-  DatePicker,
   Library,
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
   RefreshCw,
   toast,
 } from '@/components/emcn'
+import { Calendar } from '@/components/emcn/components/calendar/calendar'
 import { Download, Workflow } from '@/components/emcn/icons'
 import type {
   WorkflowLogDetail,
@@ -1425,10 +1428,7 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
             className='w-full'
             maxHeight={320}
           />
-          <DatePicker
-            mode='range'
-            showTrigger={false}
-            showTime
+          <Popover
             open={datePickerOpen}
             onOpenChange={(isOpen) => {
               if (!isOpen) {
@@ -1439,11 +1439,19 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
                 }
               }
             }}
-            startDate={startDate}
-            endDate={endDate}
-            onRangeChange={handleDateRangeApply}
-            onCancel={handleDatePickerCancel}
-          />
+          >
+            <PopoverAnchor className='absolute inset-0' />
+            <PopoverContent align='start' sideOffset={4} className='w-auto p-0'>
+              <Calendar
+                mode='range'
+                showTime
+                startDate={startDate}
+                endDate={endDate}
+                onRangeChange={handleDateRangeApply}
+                onCancel={handleDatePickerCancel}
+              />
+            </PopoverContent>
+          </Popover>
         </div>
       </div>
 

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/row-modal/row-modal.tsx

@@ -7,13 +7,13 @@ import { useParams } from 'next/navigation'
 import {
   Checkbox,
   ChipConfirmModal,
+  ChipDatePicker,
   ChipModal,
   ChipModalBody,
   ChipModalError,
   ChipModalField,
   ChipModalFooter,
   ChipModalHeader,
-  DatePicker,
   Label,
 } from '@/components/emcn'
 import type { ColumnDefinition, TableInfo, TableRow } from '@/lib/table'
@@ -238,11 +238,11 @@ function ColumnField({ column, value, onChange }: ColumnFieldProps) {
   if (column.type === 'date') {
     return (
       <ChipModalField type='custom' title={title} required={column.required} hint={hint}>
-        <DatePicker
-          mode='single'
+        <ChipDatePicker
           value={formatValueForInput(value, column.type) || undefined}
-          onChange={(dateStr) => onChange(dateStr)}
+          onChange={onChange}
           placeholder='Select date'
+          fullWidth
         />
       </ChipModalField>
     )

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/inline-editors.tsx

@@ -1,7 +1,8 @@
 'use client'
 
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { DatePicker } from '@/components/emcn'
+import { Popover, PopoverAnchor, PopoverContent } from '@/components/emcn'
+import { Calendar } from '@/components/emcn/components/calendar/calendar'
 import { cn } from '@/lib/core/utils/cn'
 import type { ColumnDefinition } from '@/lib/table'
 import type { SaveReason } from '../../../types'
@@ -20,7 +21,7 @@ interface InlineEditorProps {
   onCancel: () => void
 }
 
-/** Inline editor for `date` columns — text input + popover DatePicker. */
+/** Inline editor for `date` columns — text input + popover calendar. */
 function InlineDateEditor({
   value,
   column,
@@ -116,17 +117,12 @@ function InlineDateEditor({
           'w-full min-w-0 select-text border-none bg-transparent p-0 text-[var(--text-primary)] text-small outline-none'
         )}
       />
-      <div className='absolute top-full left-0 size-0'>
-        <DatePicker
-          mode='single'
-          value={pickerValue}
-          onChange={handlePickerChange}
-          open={true}
-          onOpenChange={handlePickerOpenChange}
-          showTrigger={false}
-          size='sm'
-        />
-      </div>
+      <Popover open onOpenChange={handlePickerOpenChange}>
+        <PopoverAnchor className='absolute top-full left-0 size-0' />
+        <PopoverContent align='start' sideOffset={4} className='w-auto p-0'>
+          <Calendar value={pickerValue} onChange={handlePickerChange} />
+        </PopoverContent>
+      </Popover>
     </>
   )
 }