basicdoc.js

import { DocSectionCode } from '@/components/doc/common/docsectioncode';
import { DocSectionText } from '@/components/doc/common/docsectiontext';
import { Calendar } from '@/components/lib/calendar/Calendar';
import { useState } from 'react';

export function BasicDoc(props) {
    const [date, setDate] = useState(null);

    const code = {
        basic: `
        <Calendar
            value={date}
            onChange={(e) => setDate(e.value)}
            appendTo={typeof window !== 'undefined' ? document.body : null}
        />
        `,
        javascript: `
import React, { useState } from "react";
import { Calendar } from 'primereact/calendar';

export default function BasicDemo() {
    const [date, setDate] = useState(null);

    return (
        <div className="card flex justify-content-center">
        <Calendar
            value={date}
            onChange={(e) => setDate(e.value)}
            appendTo={typeof window !== 'undefined' ? document.body : null}
        />
        </div>
    )
}
        `,
        typescript: `
import React, { useState } from "react";
import { Calendar } from 'primereact/calendar';
import { Nullable } from "primereact/ts-helpers";

export default function BasicDemo() {
    const [date, setDate] = useState<Nullable<Date>>(null);

    return (
        <div className="card flex justify-content-center">
            <Calendar
                value={date}
                onChange={(e) => setDate(e.value)}
                appendTo={typeof window !== 'undefined' ? document.body : null}
            />
        </div>
    )
}
        `
    };

    return (
        <>
            <DocSectionText {...props}>
                <p>
                    Calendar is used a controlled input component with <i>value</i> and <i>onChange</i> properties.
                </p>
            </DocSectionText>
            <div className="card flex justify-content-center">
                <Calendar value={date} onChange={(e) => setDate(e.value)} appendTo={typeof window !== 'undefined' ? document.body : null} />
            </div>
            <DocSectionCode code={code} />
        </>
    );
}