نمونه‌های React

نمونه‌هایی از نحوه استفاده از کامپوننت انتخاب تاریخ در پروژه‌های React.

import React, { useState } from 'react';
import 'persian-datepicker-element';

function App() {
  const [date, setDate] = useState(null);

  return (
    <div>
      <persian-datepicker-element
        onChange={(e) => setDate(e.detail.jalali)}
        placeholder="تاریخ را انتخاب کنید"
      />
      {date && <p>تاریخ انتخاب شده: {date.join('/')}</p>}
    </div>
  );
}

import React, { useState } from 'react';
import 'persian-datepicker-element';

interface DatePickerEvent extends CustomEvent {
  detail: {
    jalali: [number, number, number];
    gregorian: [number, number, number];
  };
}

function App() {
  const [date, setDate] = useState<[number, number, number] | null>(null);

  return (
    <div>
      <persian-datepicker-element
        onChange={(e: DatePickerEvent) => setDate(e.detail.jalali)}
        placeholder="تاریخ را انتخاب کنید"
      />
      {date && <p>تاریخ انتخاب شده: {date.join('/')}</p>}
    </div>
  );
}

import React from 'react';
import styled from 'styled-components';
import 'persian-datepicker-element';

const StyledDatePicker = styled(persian-datepicker-element)`
  --jdp-primary: #0891b2;
  --jdp-background: #ffffff;
  --jdp-foreground: #1e293b;
  --jdp-border: #e2e8f0;
  --jdp-font-size: 14px;
  --jdp-border-radius: 4px;
  --jdp-font-family: 'Vazir', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --jdp-font-feature-settings: "ss02";
`;

function App() {
  return (
    <div>
      <StyledDatePicker placeholder="تاریخ را انتخاب کنید" />
    </div>
  );
}

import React from 'react';
import { TextField } from '@mui/material';
import 'persian-datepicker-element';

function App() {
  return (
    <div>
      <TextField
        InputProps={{
          inputComponent: 'persian-datepicker-element',
          inputProps: {
            placeholder: 'تاریخ را انتخاب کنید',
            onChange: (e) => console.log(e.detail.jalali)
          }
        }}
      />
    </div>
  );
}

import React from 'react';
import { Box } from '@chakra-ui/react';
import 'persian-datepicker-element';

function App() {
  return (
    <Box>
      <persian-datepicker-element
        style={{
          '--jdp-primary': '#3182ce',
          '--jdp-background': '#ffffff',
          '--jdp-foreground': '#2d3748',
          '--jdp-border': '#e2e8f0',
          '--jdp-font-size': '14px',
          '--jdp-border-radius': '4px',
          '--jdp-font-family': "'Vazir', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
          '--jdp-font-feature-settings': '"ss02"'
        }}
        placeholder="تاریخ را انتخاب کنید"
      />
    </Box>
  );
}