I'm using meterial-ui-datetimepicker in order to represent calender and time picker.
My time picker looks like that:
My analog time picker
And I want to display it in digital mode, like this:
Digital time picker
My code:
import React from 'react';
import DateTimePicker from 'libs/DateTimePicker';
import DatePickerDialog from 'material-ui/DatePicker/DatePickerDialog';
import TimePickerDialog from 'material-ui/TimePicker/TimePickerDialog';
class DatetimeFilter extends React.Component {
render() {
return (
<DateTimePicker
DatePicker={DatePickerDialog}
TimePicker={TimePickerDialog}
onChange={this.handleTimeChange}
floatingLabelText={this.props.label}
timeFormat={'24hr'}
/>);
}
}
Does meterial-ui have a digital form of time picker ?
If not, how can I do that ?
1 No it doesn't.
2 I use rc-time-picker
Related
I have tried displaying a Google Calendar in my React project with FullCalendar by following their events from Google Calendar instructions and got errors about unreachable code. Then I tried adapting it for React. The result was a nice calendar with no data.
Here is my code. As you can see, I am not using 'Calendar' like shown in the instructions but rather FullCalendar.
import React from "react";
import FullCalendar from '#fullcalendar/react'
import {Calendar} from "#fullcalendar/core";
import timeGridPlugin from "#fullcalendar/timegrid";
import googleCalendarPlugin from '#fullcalendar/google-calendar';
const GoogleCalendar = () => {
return (
<FullCalendar
plugins={[timeGridPlugin, googleCalendarPlugin]}
initialView="timeGridDay"
googleCalendarApiKey= <MY_API_KEY>
events={[
{ googleCalendarId: <MY_CALENDAR_ID> }
]}
/>
);
};
export default GoogleCalendar;
When I use FullCalendar I see a calendar on the page but it contains
no data from Google Calendar despite there being test events in there. I get no console errors.
When I use Calendar instead of FullCalendar, I see a blank page and
get the following errors:
Can anyone help me? I have not had any luck getting a Google Calendar to display on a page!
Many thanks
You need to make your calendar public
I had the same problem few minutes ago. My solution is changing 'events' -> 'eventSources'.
You have to use FullCalendar, not Calendar. Also you have to enclose events like this:
events = {{ googleCalendarId: smthn }}
I want to add a date picker instead of "Today" button. How can I make this?
If it is with only "Custom Toolbar" can you guys link a demo for that?
If it can't be happen I want to do this out of the calendar. When I choose a date it has to navigate. How can I do this?
Thanks
You can do this by providing a custom Toolbar component.
const { Navigate } from 'react-big-calendar';
export default function CustomToolbar({ date, view, views, label, onView, onNavigate, localizer }) {
// this only works if `newDate` is a true JS Date
const onPickerChange = (newDate) => onNavigate(Navigate.DATE, newDate);
// ... the rest of your Toolbar display
}
Then
<Calendar components={{toolbar: CustomToolbar}} />
If you don't want to provide your own Toolbar, you can add your own component for date picker (for example MUI) and use the onNavigate prop as mentioned in the docs https://jquense.github.io/react-big-calendar/examples/index.html?path=/docs/props--on-navigate
I want to remove "00" from time in react-big-calendar but not able to find the way.
If you had looked into Localization and Date Formatting in the Readme / Manual, you could have easily done it using the following. TBH, it's right there in the Getting Started - you need to use dateFormat:
import BigCalendar from 'react-big-calendar'
import moment from 'moment'
// Setup the localizer by providing the moment (or globalize) Object
// to the correct localizer.
const localizer = BigCalendar.momentLocalizer(moment) // or globalizeLocalizer
const MyCalendar = props => (
<div>
<BigCalendar
localizer={localizer}
events={myEventsList}
startAccessor="start"
endAccessor="end"
dateFormat="h t"
/>
</div>
)
Preview
Related: How to set momentLocalizer (moment.js) for react-big-calendar (fullcalendar.js)?
A timestamp string is stored in database like so:
startsAt: 1535705100000
endsAt: 1535708100000
currently there is as a const endTime that should convert the timestamp string into a human-readable, as well as a TimeInput field like this:
import Moment from "react-moment";
..
const endTime = (
<Moment unix format="HH:mm">
{endsAt / 1000}
</Moment>
);
.
..
import { TimeInput } from "semantic-ui-calendar-react";
<TimeInput
..
name="startsAt"
placeholder="00:00"
value={endTime}
..
/>
With that const endTime declared, what is being rendered to the input field is [object Object].
The question is - whether I can use to create a constant at all to be displayed as a value in the TimeInput component.
OR/ALSO - what is the best way to render a readable time from a string in such scenario? Desired output: H:mm
Many thanks in advance!
Take a look at your console. My guess is you are probably also getting a prop-type error for the value prop on your TimeInput component. It is rendering [object Object] because you are passing a React component there instead of a string. So it looks like value does not accept a React component as input.
You are using react-moment as your package to convert time. But it is always going to render some sort of html tag around your string when converting the time displayed. You should instead try using moment instead. The main library will return you an actual string which you can directly pass to your value.
Q: whether I can use to create a constant at all to be displayed as a value in the TimeInput component.
A: Yes you can!
BTW you have messed up types - this is a cause why your example doesn't work correctly.
Let's look on types:
endTime is described as const of type JSX.Element
property value of TimeInput element has type of string
So you are using incompatible types as compatible!
The example of how Moment, moment and TimeInput should be used together:
import "./styles.css";
import moment from "moment";
import Moment from "react-moment";
import { TimeInput } from "semantic-ui-calendar-react";
export default function App() {
const endsAt = 1535708100000;
return (
<div className="App">
<h1>React-moment usage example</h1>
<Moment unix format="HH:mm">
{endsAt / 1000}
</Moment>
<TimeInput
name="startsAt"
placeholder="00:00"
value={moment(endsAt).format("HH:mm")}
onChange={() => {
return;
}}
/>
</div>
);
}
Take a look onto working example here: https://codesandbox.io/s/epic-napier-kc6q6k?file=/src/App.tsx
I'm trying to set the locale of blueprintjs DateRangeInput. The docs state that the Component uses Moment.js for localisation. So I tried to set locale="de", but the language is English still. Any ideas what is missing to get a translated date input?
I'm fairly new to React programming so I can't be sure that it has nothing to do with my React skills, even tho passing the props seems quite right to me.
<DateRangeInput
locale={"de"}
value={dates}
onChange={...}
/>
try adding this import "moment/locale/de" to the top of the file
i think blueprint uses new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/) to remove the locales from moment which is pretty common since moment is really large.
if that doesn't work try adding this to your webpack plugins
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de/)
The DateTime components (Date picker, Date range picker, Time picker, Date time picker, Date input, and Date range input) all depend on react-day-picker.
To set the desired locale, according to the react-day-picker documentation you need to import the desired locale from moment as mentioned above and set the localeUtils (a set of functions used to render the component based on the current locale).
The code below is how it works.
import React from 'react';
import { DateRangeInput } from "#blueprintjs/datetime";
import 'react-day-picker/lib/style.css';
// Include the locale utils designed for moment
import MomentLocaleUtils from 'react-day-picker/moment';
// Make sure moment.js has the required locale data
import 'moment/locale/ja';
export default class LocalizedExample extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<DateRangeInput localeUtils={MomentLocaleUtils} locale='ja' />
</div>
);
}
}