[templates] Template Dates new feature to select 3 dates format

[SamimSafi]

Summary

Hello,

In the previous version of the admin panel, we developed/customized a feature allowing users to select from different date formats. I’ve attached an image showing how we customized the date picker settings to enable users to choose the desired date format.

For the latest version of the Minimals template, I would like to request the inclusion of the following three date selection options:

Shamsi Date Qamari Date Gregorian Date Please refer to the attached image for an example.

Thank you!

Examples

Settings part that has date selection type

The result of each date selecting and displaying in the form datepickers

Motivation

The component that we have Created and customization that we have done in earlier version for the date pickers is as below

import { TextField, Typography } from '@mui/material';
import { Controller } from 'react-hook-form';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import AdapterJalali from '@date-io/date-fns-jalali';
import AdapterHijri from '@date-io/hijri';
import { useState } from 'react';
import ar from 'date-fns/locale/ar';
import af from 'date-fns/locale/af/index';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import moment from 'moment-hijri';
import useSettings from 'src/hooks/useSettings';

interface Props {
  control: any;
  label: any;
  name: any;
  targetName?: any;
  isDisablePast?: any;
  size?: any;
  views?: any;
  showAsterisk?: boolean;
  // value?: string;
}

export default function LocalizDatePicker({
  control,
  label,
  name,
  targetName,
  isDisablePast,
  size,
  showAsterisk,
  views,
}: // value,
Props) {
  const { dateFormat } = useSettings();

  const [open, setOpen] = useState(false);

  return (
    <>
      {dateFormat === 'GD' ? (
        <LocalizationProvider dateAdapter={AdapterDateFns}>
          <Controller
            name={name}
            control={control}
            render={({ field, fieldState: { error } }) => (
              <DatePicker
                open={open}
                onOpen={() => setOpen(true)}
                onClose={() => setOpen(false)}
                views={views}
                label={
                  <Typography>
                    {label}{' '}
                    {showAsterisk && <span style={{ color: 'red', fontWeight: 'bold' }}> *</span>}
                  </Typography>
                }
                value={field.value}
                disableHighlightToday={true}
                disablePast={isDisablePast !== undefined || isDisablePast === true ? true : false}
                onChange={(newValue) => {
                  field.onChange(newValue);
                  if (targetName) {
                    control.setValue(targetName, newValue);
                  }
                }}
                renderInput={(params) => (
                  <TextField
                    {...params}
                    onClick={(e) => setOpen(true)}
                    fullWidth
                    size={size}
                    error={!!error}
                    helperText={error?.message}
                    // value={value}
                  />
                )}
              />
            )}
          />
        </LocalizationProvider>
      ) : dateFormat === 'Shamsi' ? (
        <LocalizationProvider dateAdapter={AdapterJalali} adapterLocale={af}>
          <Controller
            name={name}
            control={control}
            render={({ field, fieldState: { error } }) => (
              <DatePicker
                open={open}
                onOpen={() => setOpen(true)}
                onClose={() => setOpen(false)}
                views={views}
                label={
                  <Typography>
                    {label}{' '}
                    {showAsterisk && <span style={{ color: 'red', fontWeight: 'bold' }}> *</span>}
                  </Typography>
                }
                value={field.value}
                disableHighlightToday={true}
                disablePast={isDisablePast !== undefined || isDisablePast === true ? true : false}
                onChange={(newValue) => {
                  field.onChange(newValue);
                  if (targetName) {
                    control.setValue(targetName, newValue);
                  }
                }}
                renderInput={(params) => (
                  <TextField
                    {...params}
                    onClick={(e) => setOpen(true)}
                    fullWidth
                    size={size}
                    error={!!error}
                    helperText={error?.message}
                  />
                )}
              />
            )}
          />
        </LocalizationProvider>
      ) : (
        <LocalizationProvider dateAdapter={AdapterHijri} adapterLocale={ar}>
          <Controller
            name={name}
            control={control}
            render={({ field, fieldState: { error } }) => (
              <DatePicker
                open={open}
                onOpen={() => setOpen(true)}
                onClose={() => setOpen(false)}
                label={
                  <Typography>
                    {label}{' '}
                    {showAsterisk && <span style={{ color: 'red', fontWeight: 'bold' }}> *</span>}
                  </Typography>
                }
                minDate={moment(new Date(1938, 0, 1))}
                maxDate={moment(new Date(2075, 11, 31))}
                value={field.value}
                disableHighlightToday={true}
                disablePast={isDisablePast !== undefined || isDisablePast === true ? true : false}
                onChange={(newValue) => {
                  field.onChange(newValue);
                  if (targetName) {
                    control.setValue(targetName, newValue);
                  }
                }}
                renderInput={(params) => (
                  <TextField
                    {...params}
                    onClick={(e) => setOpen(true)}
                    fullWidth
                    size={size}
                    error={!!error}
                    helperText={error?.message}
                  />
                )}
              />
            )}
          />
        </LocalizationProvider>
      )}
    </>
  );
}

Search keywords: MUI Persian Date, MUI Qamary Date, MUI Different Date selection Order ID: 99134

[SamimSafi]

i Think i have uplaoded two images is not showing

Settings part that has date selection type

The result of each date selecting and displaying in the form datepickers

[michelengelen]

Do I get this right, that you are requesting the addition of different Formats, but in a template and not the components itself?

[SamimSafi]

weather in template or in component no matter if it's possible we want this setting to be able select 3 type of date Shamsi, Qamary, Gregorian Date (Melody) Thanks

[michelengelen]

Ok ... @zanivan could you take over?

[hasdfa]

Dear @SamimSafi, Could you please submit an email for the template Author who could help you with this request at support@minimals.cc? This issue seems unrelated to MUI X because the base component already supports that customisation via LocalizationProvider.

P.S. I created an issue for adding more transparent ways for customers to find the right support channel in the Store - https://github.com/mui/mui-private/issues/624

[SamimSafi]

@hasdfa Thanks Dear i will email the template writer for the issue to be done Thanks

[oliviertassinari]

I'm closing per Vadym's feedback. No bug report or feature request was raised relative to MUI X. It looks like a question for our third parties Premium templates: Minimal.