[英]How to create a date picking input field using Atlassian's calendar component with reactjs
All I want is a simple date input field for the user to pick a date. 我想要的只是一个简单的日期输入字段,供用户选择日期。 The user clicks on the input field, which opens a calendar (in this case we are using Atlassian), user picks the date and the calendar shuts but keeps the input field with the chosen date.
用户单击输入字段,这将打开一个日历(在本例中,我们使用的是Atlassian),用户选择日期,日历将关闭,但将输入字段保留为选定的日期。
As it is right now all I have is the calendar component, which I have no idea how to interact with or get the data from and no documentation to tell me how. 现在,我所拥有的只是日历组件,我不知道如何与之交互或从中获取数据,也没有文档告诉我如何做。 Here is roughly what my current code is: import Calendar from '@atlaskit/calendar'
这大致就是我当前的代码:从'@ atlaskit / calendar'导入日历
export default class DateInputForm {
render () {
return (
<div>
<form>
<Calendar
onSelect={()=> {console.warn('do something!!)}}
onChange={()=> {console.warn('do something!!)}}/>
</form>
</div>
)
}
}
Edit: as was suggested to me, I created the component with an input field and the Calendar, however I still can't grab the values picked from Calendar. 编辑:按照我的建议,我创建了一个带有输入字段和日历的组件,但是仍然无法获取从日历中选取的值。
export default class DatePicker extends React.Component {
static propTypes ={
value: PropTypes.string
}
constructor (props) {
super(props)
this.state = {
calendarOpened: false
}
}
openCalendar () {
this.setState({calendarOpened: true})
}
render () {
const { value } = this.props
return (
<div>
<input
value={value || 'yyyy-mm-dd'}
onClick={() => this.openCalendar()} />
{this.state.calendarOpened
? <Calendar
onSelect={() => {console.warn('do something!!)}}
onChange={() => {console.warn('do something!!)}}/>
: null}
</div>
)
}
}
Edit2: I should probably note that absolutely nothing happens during the onSelect and onChange of the Calendar component. Edit2:我可能应该注意,在Calendar组件的onSelect和onChange期间绝对不会发生任何事情。 All I want at this point is to have access to whatever date I chose from the Calendar component
我现在想要的只是可以访问我从“日历”组件中选择的任何日期
I would do something like this : 我会做这样的事情:
class DatePicker extends React.Component {
constructor(props) {
super(props);
this.openCalendar = this.openCalendar.bind(this);
this.changeDate = this.changeDate.bind(this);
this.state = {
calendarOpened: false,
selectedDate: null,
};
}
changeDate(event) {
this.setState ({
selectedDate: event.value
)};
}
openCalendar() {
this.setState({
calendarOpened: true,
});
}
render () {
const { value } = this.props;
return (
<div>
<input
value={this.state.selectedDate || 'yyyy-mm-dd'}
onClick={() => this.openCalendar()} />
{this.state.calendarOpened
? <Calendar
onChange={this.changeDate}/>
: null}
</div>
)
}
}
This is not perfect code and not perfect but i dont know how to reference your npm stuff in codepen or stackoverflow code editor. 这不是完美的代码,也不是完美的,但是我不知道如何在Codepen或stackoverflow代码编辑器中引用您的npm东西。 See if this works out.
看看是否可行。
Finally figured it out. 终于想通了。 Basically had to practically re-write the entire thing and had to user
CalendarStateless
as opposed to just Calendar
which apparently isn't really editable in the way I wanted to be. 基本上,实际上必须重新编写整个内容,并且必须使用
CalendarStateless
而不是CalendarStateless
,而Calendar
显然不能按照我想要的方式进行编辑。 See more details here 在这里查看更多详细信息
Anyway, this was roughly the resulting component: 无论如何,这大致就是最终的组件:
import {CalendarStateless} from '@atlaskit/calendar'
export default class DatePicker extends React.Component {
static propTypes ={
value: PropTypes.string,
onChange: PropTypes.func.isRequired
}
constructor (props) {
super(props)
this.state = {
calendarOpened: false,
selected: [],
day: new Date().getDate(),
month: new Date().getMonth() + 1,
year: new Date().getFullYear()
}
}
// this is for the actual date selection
selectDate (evt) {
this.setState({ selected: evt.iso, calendarOpened: false })
}
// this is to display different months or years
// without it we would only have one calendar page
changeInfo ({ day, month, year }) {
this.setState({ day, month, year })
}
openCalendar () {
this.setState({calendarOpened: true})
}
render () {
const { value } = this.props
return (
<div>
<input
value={value || ''}
placeholder='yyyy-mm-dd'
onClick={() => this.openCalendar()} />
{this.state.calendarOpened
? <CalendarStateless
selected={this.props.value}
day={this.state.day}
month={this.state.month}
year={this.state.year}
onSelect={(evt) => this.selectDate(evt)}
onChange={date => this.changeInfo(date)}/>
: null}
</div>
)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.