You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

react-admin-date-inputs

Package Overview
Dependencies
Maintainers
1
Versions
26
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-admin-date-inputs

react-admin-date-inputs


Version published
Weekly downloads
308
decreased by-26.49%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

react-admin-date-inputs

<DateInput>, <TimeInput> and <DateTimeInput> components for React-Admin.

date-time-picker.gif

Installation

npm install react-admin-date-inputs --save

Usage

You have to include an icon font to display the icons on the picker. This is mentioned on the bottom of the material-ui-pickers installation page.

// on index.html
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
import React from 'react';
import {
    Edit,
    TextInput,
    TabbedForm,
    FormTab,
} from 'react-admin'
import { DateInput, TimeInput, DateTimeInput } from 'react-admin-date-inputs';

export const NewsEdit = (props) => (
  <Edit title={<NewsTitle />} {...props}>
    <TabbedForm>
      <FormTab>
        <LongTextInput source="title" validate={required} />
        <DateInput source="startDate" label="Start date" options={{ format: 'DD/MM/YYYY' }} />
        <TimeInput source="startTime" label="Start time" options={{ format: 'HH:mm:ss' }} />
        <DateTimeInput source="endDate" label="End time" options={{ format: 'DD/MM/YYYY, HH:mm:ss', ampm: false, clearable: true }} />
      </FormTab>
    </TabbedForm>
  </Edit>
);

Options prop

The options prop is passed down to the pickers. Documentation for these options can be found in the material-ui-pickers documentation for the component you're trying to use.

providerOptions prop

If you want to use a date parser utils library other than date-fns or you want a locale other than english, you can pass the providerOptions prop:

import DateFnsUtils from '@date-io/date-fns';
import MomentUtils from 'material-ui-pickers/utils/moment-utils';
import frLocale from "date-fns/locale/fr";

...
<DateInput source="date" label="Date using moment" providerOptions={{ utils: MomentUtils }} />
<DateInput source="date" label="Date in French!" providerOptions={{ utils: DateFnsUtils, locale: frLocale }} />

NOTE: When specifying a locale you must also specify the utils, even if it's the default DateFnsUtils.

Development

You can build sources:

npm run build

License

This library is licensed under the MIT Licence.

Keywords

FAQs

Package last updated on 22 Oct 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc