Dateformat for vanilla renderer set

General
1

I am facing two issues with react vanilla date.

  1. Can not set date via uischema. It can be set via schema only.
  2. Can not set dateformat in uischema

Are these supported in vanilla renderer set?

schema

date: {
                type: 'string',
                description: 'schema-based datetime picker',
              },

uischema

{
                  type: 'Control',
                  label: 'Date',
                  scope: '#/properties/date',
                  options: {
                    format: 'date',
                    dateFormat: 'mm/dd/yyyy',
                    dateSaveFormat: 'mm/dd/yyyy',
                  },
                },
2

Hi @pankaj-z,

  • format: date in UI Schema is supported since 3.0.0-alpha.1.
  • dateFormat and dateSaveFormat UI Schema options are currently only supported in React Material and Vue2 Vuetify renderer sets. You need custom renderers for React Vanilla to support them.
3

Hi Thanks for the reply.
I ended up creating my own custom datepicker using react-datepicker.
If anyone is still looking for it then here is my solution. You can control the display of month picker using isCustomMonth property in schema.

import {
  ControlProps,
  isDateControl,
  RankedTester,
  rankWith,
} from '@jsonforms/core';
import { withJsonFormsControlProps } from '@jsonforms/react';
import DatePicker from 'react-datepicker';

export const CustomDatePickerControl = (props: ControlProps) => {
  const { errors, label, visible, path, handleChange, data, schema } = props;
  const isValid = errors.length === 0;
  const dateFormat = (schema as any).isCustomMonth ? 'MM/yyyy' : 'MM/dd/yyyy';
  const showMonthYearPicker = (schema as any).isCustomMonth;

  const getDate = () => {
    return data ? new Date(data) : new Date();
  };

  return (
    <>
      <div className='form-group'>
        <label className='custom-input-label'>{label}</label>
        <DatePicker
          selected={getDate()}
          dateFormat={dateFormat}
          showMonthYearPicker={showMonthYearPicker}
          onChange={(date: Date) => {
            console.log(date.toLocaleDateString('en-US'));
            return handleChange(path, date.toLocaleDateString('en-US'));
          }}
        />
      </div>
    </>
  );
};

export const customDatePickerControlTester: RankedTester = rankWith(
  5,
  isDateControl
);

export default withJsonFormsControlProps(CustomDatePickerControl);

schema:

datetime: {
                type: 'string',
                format: 'date',
                isCustomMonth: true
              },

uischema:

                {
                  type: 'Control',
                  label: 'Dates',
                  scope: '#/properties/datetime',
                },
1 Like