Momentix - Production-Ready DateTime Picker

A comprehensive, production-ready DateTime Picker component with full timezone support, event display, and complete customization. Built with Next.js, React, MUI X Date Pickers, and TypeScript.

✨ Features

• ✅ Multiple Modes: Date, Time, and DateTime pickers
• ✅ Full Timezone Support: Auto-detect + multiple timezones with UTC conversion
• ✅ Event Display: Show events on calendar with clickable details
• ✅ Date Range Control: Disable/enable specific date ranges
• ✅ Customizable: Colors, fonts, sizes, dimensions - full control
• ✅ Responsive: Small, Medium, Large sizes with mobile support
• ✅ TypeScript: Fully typed with comprehensive interfaces
• ✅ Material UI: Beautiful animations and polished UI

Tech Stack

• Next.js 14 (App Router)
• React 18
• MUI X Date Pickers (v7)
• MUI Core (v6)
• Day.js with timezone & UTC plugins
• TypeScript

Installation

npm install momentix

Peer Dependencies

npm install react react-dom @mui/material @mui/x-date-pickers dayjs

Quick Start

import { useState } from 'react';
import DateTimePicker from 'momentix';

function MyComponent() {
  const [value, setValue] = useState<Date | null>(null);

  return (
    <DateTimePicker
      value={value}
      onChange={setValue}
      mode="datetime"
      label="Select Date & Time"
    />
  );
}

Basic Usage

Date Only

<DateTimePicker
  value={value}
  onChange={setValue}
  mode="date"
  label="Select Date"
/>

Time Only

<DateTimePicker
  value={value}
  onChange={setValue}
  mode="time"
  label="Select Time"
/>

With Timezone

<DateTimePicker
  value={value}
  onChange={setValue}
  mode="datetime"
  timezone="Asia/Kolkata"
  showTimezoneSelector={true}
  showUtcPreview={true}
/>

With Events

const events = [
  {
    id: '1',
    name: 'Meeting',
    date: new Date(2024, 11, 15, 14, 0),
    timezone: 'America/New_York',
    color: '#1976d2',
    isTimeBased: true,
  },
];

<DateTimePicker
  value={value}
  onChange={setValue}
  mode="datetime"
  events={events}
  showEvents={true}
/>

Documentation

📖 Complete Developer Guide - Full API reference, examples, and best practices

Key Props

| Prop | Type | Description | |------|------|-------------| | value | Date \| null | Current selected value | | onChange | (value: Date \| null) => void | Change handler | | mode | 'date' \| 'time' \| 'datetime' | Picker mode | | timezone | string | Selected timezone | | events | CalendarEvent[] | Events to display | | size | 'small' \| 'medium' \| 'large' | Component size | | width | string \| number | Component width | | height | string \| number | Component height |

See DEVELOPER_GUIDE.md for complete API reference.

Best Practices

1. Always use UTC for backend storage: The component automatically converts to UTC when timezone prop is set.

2. Store UTC in database: Store dates as UTC timestamps in your database.

3. Convert for display: Convert UTC dates back to user's timezone when displaying.

4. Use ISO strings for API: Send dates as ISO strings (date.toISOString()) to your API.

5. Validate on backend: Always validate date ranges on the backend, not just the frontend.

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.