Playground

import React, { useState } from 'react'
import './styles.css'
import { DtCalendar } from 'react-calendar-datetime-picker'
import 'react-calendar-datetime-picker/style.css'

function App() {
  const [selectedDate, setSelectedDate] = useState(null)

  const handleChange = (normalizedValue, jsDate, formattedString) => {
    setSelectedDate({
      normalized: normalizedValue,
      jsDate: jsDate,
      formatted: formattedString
    })
    console.log('Date selected:', { normalizedValue, jsDate, formattedString })
  }

  return (
    <div className="app-container">
      <div className="header">
        <h1>React Calendar DateTime Picker</h1>
        <p>Select a date using the calendar below</p>
      </div>
      
      <div className="picker-wrapper">
        <DtCalendar
          onChange={handleChange}
          calendarSystem="gregorian"
          showWeekend={true}
          todayBtn={true}
          dark={true}
        />
      </div>

      {selectedDate && (
        <div className="result">
          <h2>Selected Date:</h2>
          <div className="result-content">
            <p><strong>Normalized:</strong> {JSON.stringify(selectedDate.normalized, null, 2)}</p>
            <p><strong>JS Date:</strong> {selectedDate.jsDate?.toString()}</p>
            <p><strong>Formatted:</strong> {selectedDate.formatted}</p>
          </div>
        </div>
      )}

      <div className="info">
        <p>💡 Try selecting different dates to see the output change!</p>
      </div>
    </div>
  )
}

export default App