Im using React date picker http://react-day-picker.js.org/
Im using the today button:
http://react-day-picker.js.org/examples/customization-today-button/
The default behaviour for the today button is to navigate to the current month but not select the actual day. How can I make it select the actual day? This is updating the selectedDay state in this code example
import React from 'react';
import DayPicker from 'react-day-picker';
import 'react-day-picker/lib/style.css';
export default class BasicConcepts extends React.Component {
constructor(props) {
super(props);
this.handleDayClick = this.handleDayClick.bind(this);
this.state = {
selectedDay: undefined,
};
}
handleDayClick(day) {
this.setState({ selectedDay: day });
}
render() {
return (
<div>
<DayPicker onDayClick={this.handleDayClick} />
{this.state.selectedDay ? (
<p>You clicked {this.state.selectedDay.toLocaleDateString()}</p>
) : (
<p>Please select a day.</p>
)}
</div>
);
}
}
You can use onTodayButtonClick and set the day as selected:
<DayPicker
selectedDays={this.state.selectedDay}
todayButton="Select today"
onTodayButtonClick={day=>this.setState({selectedDay: day})
/>
Related
I would like to create a CSS element such that:
There is a button.
Clicking on the button opens a list (e.g., a dropdown list) of items.
We can click on the items to select and the parent component is systematically informed.
We click on the area outside the list (e.g., clicking on the button again) to close the list.
I have made a normal dropdown list with the following code by Dropdown (one version and another preview version) of Fluent UI (codesandbox: https://codesandbox.io/s/inspiring-lovelace-ivln6v?file=/src/App.js). It does not fulfil the 4th condition above: selecting an item will systematically close the dropdown, whereas I would expect the list is still open and clicking on the area outside the list (e.g., clicking on the button again) closes the list.
Note that this is the default behavior of controlled multi-select Dropdown, where we have to click on the area outside the dropdown (e.g., clicking on the button again) to close the dropdown. So it's not an unreasonable need.
Does anyone know how to make such a CSS element (probably by adjusting existing controls)? I'm open to list controls such as Dropdown, Select and Combobox of libraries such as Fabric UI, Fluent UI, Material UI.
import React from "react";
import { Dropdown } from "#fluentui/react/lib/Dropdown";
import { initializeIcons } from "#fluentui/react/lib/Icons";
initializeIcons();
const numberOptions = [8, 9, 10].map((i) => ({
key: i,
text: "Number: " + i.toString()
}));
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { number: 8 };
}
onnumberChange = (_ev, option) => {
if (typeof option.key === "number") {
this.setState({ number: option.key });
}
};
render() {
return (
<div>
{`Number: ${this.state.number}`}
<br />
<br />
<Dropdown
options={numberOptions}
defaultSelectedKey={this.state.number}
onChange={this.onnumberChange}
/>
</div>
);
}
}
A workaround is to use open, onOpenChange, onOpenSelect of the preview version of Dropdown.
CodeSandbox: https://codesandbox.io/s/inspiring-almeida-3lgtcy?file=/src/App.js
import React from "react";
import { Dropdown, Option } from "#fluentui/react-components/unstable";
import { FluentProvider, webLightTheme } from "#fluentui/react-components";
import { initializeIcons } from "#fluentui/react/lib/Icons";
initializeIcons();
const numberOptions = ["8", "9", "10"];
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { number: "9", op: false };
}
render() {
return (
<FluentProvider theme={webLightTheme}>
<div>
{`Number: ${this.state.number}`}
<br />
<br />
<Dropdown
open={this.state.op}
onOpenChange={(e, data) =>
this.setState(
{ op: data.open },
console.log("onOpenChange", this.state.op ? "closed" : "open")
)
}
onOptionSelect={(e, data) =>
this.setState({ op: true, number: data.optionText })
}
defaultSelectedOptions={["9"]}
>
{numberOptions.map((option) => (
<Option key={option}>{option}</Option>
))}
</Dropdown>
</div>
</FluentProvider>
);
}
}
I have created a simple datepicker component based on react-dates and implemented as per documentation at https://github.com/airbnb/react-dates
The datepicker seems to be working however the calendar styling is completely broken when clicking on the datepicker field
The datepicker code:
import React, { Component } from 'react';
import moment from 'moment';
import 'react-dates/initialize';
import { SingleDatePicker } from 'react-dates';
import 'react-dates/lib/css/_datepicker.css';
export default class DatePicker extends Component {
constructor(props) {
super(props);
this.state = {
selectedStartDate: moment(),
calendarSelectedStartDate: false
}
}
onDateChange = (selectedStartDate) => {
this.setState(() => ({ selectedStartDate }));
};
onFocusChange = ({ focused }) => {
this.setState(() => ({ calendarSelectedStartDate: focused }));
};
render() {
return (
<SingleDatePicker
date={this.state.selectedStartDate}
onDateChange={this.onDateChange}
focused={this.state.calendarSelectedStartDate}
onFocusChange={this.onFocusChange}
numberOfMonths={1}
isOutsideRange={() => false}
/>
)
}
}
Implementation is just call to :
<DatePicker />
outside of any parent html tags that could affect it.
The styling looks like this:
Ok i found an answer for this problem, so:
Are you trying to render the calendar inside another element that is not always visible, right?
Well, if you are doing that, in the parent component you must have an state like "isOpen" or something like that. Then, when you call the Picker component, must be like:
{isOpen && <DatePicker />}
I spent like two hours searching this solution. I hope that make sense for you.
I'm working with treebeard in my react project.
when I try to add a user-defined style it's not getting applied to the container.
I have tried different methods to achieve this.
I tried to define the style from tag, tried to define style.css in a different file, import it and assign it to style in Treedeard tag.
the main goal is to change the background color and the position.
Here is my code:
workspace.jsx
import React from "react";
import {Treebeard} from 'react-treebeard';
import data from "./data";
export class WorkSpace extends React. Component {
constructor(props){
super(props);
this.state = {
data: {data}
};
this.onToggle = this.onToggle.bind(this);
const decorators = {
Container: (props) => {
return (
<div style={props.backgroundColor="yellow"}>
</div>
);
}
};
}
onToggle(node, toggled){
const {cursor, data} = this.state.data;
if (cursor) {
this.setState(() => ({cursor, active: false}));
}
node.active = true;
if (node.children) {
node.toggled = toggled;
}
this.setState(() => ({cursor: node, data: Object.assign({}, data)}));
}
render() {
return (
<div className="base_container">
<h3>Select Component</h3>
<div className="components">
<Treebeard
data={data}
onToggle={this.onToggle}
style = {style_components}
decorators={this.decorators}
/>
</div>
</div>
);
}
}
the problem is that I wanted a toggle menu and I created a hamburger apply css on it and set up the methods but its not working, there is no errors given
import React, { Component } from 'react'
import './toggle.css';
export default class toggle extends Component {
constructor(props){`enter code here`
super(props);
this.state={
switch:false
}
}
handleSwitch=()=>{
this.setState={
switch:!this.state.switch
}
}
render() {
let className='toggle-switch';
if(this.state.switch){
className='toggle-switch changes';
}
return (
<div className={className} onClick={this.handleSwitch}>
<span className="bars1"></span>
<span className="bars2"></span>
<span className="bars3"></span>
</div>
)
}
}
setState is a function. Your handler should be
handleSwitch = () => this.setState({
switch: !this.state.switch
})
Or better yet, when referencing the past state value its best to use a function
handleSwitch = () => this.setState( prevState => ({
switch: !prevState.switch
}))
You need to use setState as function and I recommend to practice binding handleSwitch in constructor to access states for clearly understanding how it works:
constructor(props){
super(props);
this.state={
switch: false
}
this.handleSwitch = this.handeSwitch.bind(this);
}
handleSwitch() {
this.setState({
switch: !this.state.switch
});
}
We are upgrading from version 5.5.3 of react-day-picker to the latest version (7.1.10). I have looked at the documentation for breaking changes and modified our code accordingly. I have even changed our code to look like the code in the documentation but I cannot get the onDayChange event to fire when selecting a date from the calendar.
The handleDayChange function never fires. I have no idea why not. What am I missing?
import React from 'react'
import DayPickerInput from 'react-day-picker/DayPickerInput'
import './input-with-calendar.scss'
const dateFormat = 'MM/DD/YYYY'
export default class InputWithCalendar extends React.Component {
constructor(props) {
super(props)
this.handleDayChange = this.handleDayChange.bind(this)
this.state = { selectedDay: undefined }
}
handleDayChange(day) {
console.log('In handleDayChange')
this.setState({ selectedDay: day })
}
render() {
const { selectedDay } = this.state
return (
<div className='input-with-calendar'>
<div className='overlay-date-picker-container'>
{selectedDay && <p>Day: {selectedDay.toLocaleDateString()}</p>}
{!selectedDay && <p>Choose a day</p>}
<DayPickerInput onDayChange={this.handleDayChange} />
</div>
</div>
)
}
}
This is the 5.5.3 code...this works
import React from 'react'
import DayPickerInput from 'react-day-picker/DayPickerInput'
import './input-with-calendar.scss'
import moment from 'moment'
const dateFormat = 'MM/DD/YYYY'
const formatDate = (date) => {
return date && moment(date).format(dateFormat)
}
class InputWithCalendar extends React.Component {
componentWillMount () {
this.props.onDateChange(this.props.selectedDate)
}
render () {
return (
<div className='input-with-calendar'>
<div className='input-with-calendar-filter-label'>Date</div>
<div className='overlay-date-picker-container'>
<DayPickerInput
readOnly
value={formatDate(this.props.selectedDate)} // value is expected to be a string
placeholder={dateFormat}
onDayChange={(dateAsMoment) => this.props.onDateChange(dateAsMoment && dateAsMoment.toDate())}
dayPickerProps={{
weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
disabledDays: { before: new Date() }
}}
/>
</div>
</div>
)
}
}
export default InputWithCalendar
I believe you are missing the value prop:
<DayPickerInput
value={this.state.selectedDay}
onDayChange={this.handleDayChange}
/>
See http://react-day-picker.js.org/examples/input-state