### Installation via ShadCN CLI (Bash)

Source: https://context7.com/nainglinnkhant/lingua-time/llms.txt

Instructions for installing the complete Lingua Time component suite using the ShadCN CLI. This command adds the Lingua Time component and all its necessary dependencies, including other ShadCN UI components and libraries like chrono-node and date-fns. It simplifies setup for projects already using or planning to use ShadCN UI.

```bash
# Install the lingua-time component and all dependencies
pnpx shadcn@canary add https://raw.githubusercontent.com/nainglinnkhant/lingua-time/refs/heads/main/public/r/lingua-time.json

# The command installs:
# - DateTimePicker component
# - DateTimePickerPopover component
# - TimePicker component
# - All utility functions
# - Required dependencies: chrono-node, date-fns, lucide-react
# - Required ShadCN components: button, calendar, drawer, input, label, popover, select
```

--------------------------------

### Install Dependencies for Lingua Time Development

Source: https://github.com/nainglinnkhant/lingua-time/blob/main/README.md

This command installs the necessary project dependencies for developing the Lingua Time component. It utilizes the 'bun' package manager, which should be installed globally. Ensure you are in the root directory of the project before running this command.

```bash
bun i
```

--------------------------------

### Run Lingua Time Development Server

Source: https://github.com/nainglinnkhant/lingua-time/blob/main/README.md

This command starts the development server for the Lingua Time project. It allows you to preview changes and test the component in a local development environment. This command also uses the 'bun' package manager.

```bash
bun dev
```

--------------------------------

### Install Lingua Time Date and Time Picker

Source: https://github.com/nainglinnkhant/lingua-time/blob/main/README.md

This command adds the Lingua Time component to your project using the shadcn-ui CLI. Ensure you have the shadcn-ui CLI installed and configured in your project. This command fetches the component's configuration and integrates it into your workspace.

```shell
pnpx shadcn@canary add https://raw.githubusercontent.com/nainglinnkhant/lingua-time/refs/heads/main/public/r/lingua-time.json
```

--------------------------------

### Use Lingua Time DateTimePicker Component

Source: https://context7.com/nainglinnkhant/lingua-time/llms.txt

Demonstrates basic usage of the DateTimePicker component, showing how to manage the selected date state with useState and display it. It accepts a 'dateTime' prop for the current value and 'setDateTime' for updates.

```tsx
import { useState } from "react"
import { DateTimePicker } from "@/components/lingua-time/datetime-picker"

function App() {
  const [dateTime, setDateTime] = useState<Date | undefined>(undefined)

  return (
    <div>
      <DateTimePicker
        dateTime={dateTime}
        setDateTime={setDateTime}
        placeholder="Tomorrow morning"
        autoComplete="off"
      />
      {dateTime && (
        <p>Selected: {dateTime.toLocaleString()}</p>
      )}
    </div>
  )
}
```

--------------------------------

### Format Date Objects to Readable String

Source: https://context7.com/nainglinnkhant/lingua-time/llms.txt

Demonstrates the 'generateDateString' function, which converts JavaScript Date objects into a consistent and human-readable string format. This is useful for displaying selected dates or times.

```typescript
import { generateDateString } from "@/components/lingua-time/datetime-utils"

const date = new Date(2024, 8, 15, 14, 30) // Sept 15, 2024, 2:30 PM
const formatted = generateDateString(date)

console.log(formatted)  // "Sep 15th 2024, 02:30 PM"
```

--------------------------------

### DateTimePickerPopover Component (React)

Source: https://context7.com/nainglinnkhant/lingua-time/llms.txt

A responsive popover/drawer component for selecting both date and time. It integrates a calendar and time selection interface, offering a traditional selection method. This component requires React, DateTimePickerPopover from '@/components/lingua-time/datetime-picker-popover', and UI components like Button and CalendarDays from '@/components/ui/*'. It manages the selected date and time state, and can be controlled via props.

```tsx
import { useState } from "react"
import { DateTimePickerPopover } from "@/components/lingua-time/datetime-picker-popover"
import { Button } from "@/components/ui/button"
import { CalendarDays } from "lucide-react"

function PopoverExample() {
  const [dateTime, setDateTime] = useState<Date | undefined>(undefined)
  const [inputValue, setInputValue] = useState("")

  return (
    <DateTimePickerPopover
      onOpen={() => console.log("Picker opened")}
      dateTime={dateTime}
      setDateTime={setDateTime}
      setInputValue={setInputValue}
    >
      <Button variant="outline">
        <CalendarDays className="mr-2 h-4 w-4" />
        {dateTime ? dateTime.toLocaleDateString() : "Pick a date"}
      </Button>
    </DateTimePickerPopover>
  )
}
```

--------------------------------

### Time Picker Utility Functions (TypeScript)

Source: https://context7.com/nainglinnkhant/lingua-time/llms.txt

A collection of utility functions for validating and manipulating time inputs. Includes functions for validating hours, minutes, seconds, setting time components on a Date object, and converting between 12-hour and 24-hour formats. These functions are written in TypeScript and are part of the '@/components/time-picker/time-picker-utils' module. They take string or number inputs and return boolean or Date objects.

```typescript
import {
  isValidHour,
  isValid12Hour,
  isValidMinuteOrSecond,
  setMinutes,
  setHours,
  convert12HourTo24Hour,
  display12HourValue
} from "@/components/time-picker/time-picker-utils"

// Validate time inputs
console.log(isValidHour("23"))              // true
console.log(isValidHour("24"))              // false
console.log(isValid12Hour("12"))            // true
console.log(isValid12Hour("13"))            // false
console.log(isValidMinuteOrSecond("59"))    // true
console.log(isValidMinuteOrSecond("60"))    // false

// Manipulate date objects
const date = new Date()
const updatedDate = setMinutes(date, "30")
const hourUpdated = setHours(date, "14")

// Convert between 12-hour and 24-hour formats
const hour24 = convert12HourTo24Hour(3, "PM")    // 15
const hour24AM = convert12HourTo24Hour(12, "AM") // 0
const hour12 = display12HourValue(15)            // "03"
const hour12Noon = display12HourValue(12)        // "12"
```

--------------------------------

### Standalone TimePicker Component (React)

Source: https://context7.com/nainglinnkhant/lingua-time/llms.txt

A standalone time picker component for selecting hours, minutes, and AM/PM. It manages its own state and displays the selected time. Requires React and the TimePicker component from '@/components/time-picker/time-picker'. Outputs a formatted date string.

```tsx
import { useState } from "react"
import { TimePicker } from "@/components/time-picker/time-picker"

function TimePickerExample() {
  const [date, setDate] = useState<Date | undefined>(new Date())

  return (
    <div>
      <TimePicker date={date} setDate={setDate} />
      {date && (
        <p>Selected time: {date.toLocaleTimeString()}</p>
      )}
    </div>
  )
}
```

--------------------------------

### Parse Natural Language to Date with chrono-node

Source: https://context7.com/nainglinnkhant/lingua-time/llms.txt

Utilizes the 'generateDate' function, powered by 'chrono-node', to parse various natural language date and time expressions into JavaScript Date objects. This function simplifies input handling for dynamic date selections.

```typescript
import * as chrono from "chrono-node"
import { generateDate } from "@/components/lingua-time/datetime-utils"

// Parse various natural language inputs
const tomorrow = generateDate("tomorrow")
const nextWeek = generateDate("next Monday at 3pm")
const specific = generateDate("January 15th at 9:30am")

console.log(tomorrow)  // Date object for tomorrow at current time
console.log(nextWeek)  // Date object for next Monday at 3:00 PM
console.log(specific)  // Date object for January 15 at 9:30 AM
```

--------------------------------

### Integrate DateTimePicker with React Hook Form

Source: https://context7.com/nainglinnkhant/lingua-time/llms.txt

Shows how to integrate the DateTimePicker component into a React Hook Form, utilizing Zod for schema validation. This ensures form data is validated before submission.

```tsx
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { z } from "zod"
import { DateTimePicker } from "@/components/lingua-time/datetime-picker"
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"

const formSchema = z.object({
  dateTime: z.date({
    required_error: "Please enter a date",
    invalid_type_error: "Invalid date",
  }),
})

type FormSchema = z.infer<typeof formSchema>

function DateTimeForm() {
  const form = useForm<FormSchema>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      dateTime: undefined,
    },
  })

  function onSubmit(values: FormSchema) {
    console.log("Submitted:", values.dateTime)
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <FormField
          control={form.control}
          name="dateTime"
          render={({ field: { name, value, onChange, onBlur, disabled } }) => (
            <FormItem>
              <FormLabel>Date Time</FormLabel>
              <FormControl>
                <DateTimePicker
                  name={name}
                  dateTime={value}
                  setDateTime={onChange}
                  onBlur={onBlur}
                  disabled={disabled}
                  autoComplete="off"
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <button type="submit">Submit</button>
      </form>
    </Form>
  )
}
```

--------------------------------

### Use DateTimePicker with React Hook Form

Source: https://github.com/nainglinnkhant/lingua-time/blob/main/README.md

This code snippet demonstrates how to integrate the Lingua Time DateTimePicker component within a React application using react-hook-form. It shows the necessary props for managing the date-time value, input state, and accessibility.

```tsx
<DateTimePicker
  name={name}
  dateTime={value}
  setDateTime={onChange}
  onBlur={onBlur}
  disabled={disabled}
  autoComplete="off"
  aria-describedby={undefined}
/>
```

--------------------------------

### Validate Date String Format

Source: https://context7.com/nainglinnkhant/lingua-time/llms.txt

Shows the 'isValidDateFormat' function, which checks if a given string conforms to the specific date and time format used by the Lingua Time component. This is crucial for input validation.

```typescript
import { isValidDateFormat } from "@/components/lingua-time/datetime-utils"

console.log(isValidDateFormat("Sep 15th 2024, 02:30 PM"))  // true
console.log(isValidDateFormat("tomorrow"))                  // false
console.log(isValidDateFormat("2024-09-15"))               // false
console.log(isValidDateFormat("Jan 1st 2024, 12:00 AM"))   // true
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.