CODEWITHSUNDEEP
reactjs
Swagath Shetty
Swagath Shetty

Reputation: 301

date picker from airbnb not displaying

trying to use date picker from https://github.com/airbnb/react-dates

I am not getting any output of SingleDatePicker at all.rest of the form components are loading fine and working no error also. i am also using moment js for getting current date

version installed

"moment": "^2.24.0", "react-dates": "^21.2.1",

ExpenseListFilters.js

import React from 'react'
import moment from 'moment';
import { SingleDatePicker } from 'react-dates';
import 'react-dates/initialize';
import 'react-dates/lib/css/_datepicker.css';

const now=moment();
console.log(now.format('MMM Do, YYYY'))

export default class ExpenseForm extends React.Component {
state={
    description:'',
    note:'',
    amount:'',
    createdAt:moment(),
    calenderFocused:false
}
onDescriptionChange=(e)=>{
    const description=e.target.value
    this.setState(()=>{
        return{
            description:description
        }
    })
}

onNoteChange=(e)=>{
    const note=e.target.value
    this.setState(()=>{
        return {
            note:note
        }
    })
}

onAmountChange=(e)=>{
    const amount=e.target.value
    if(amount.match(/^\d*(\.\d{0,2})?$/)){
        this.setState(()=>{
            return{
                amount:amount
            }
        })
    }
}

onDateChange=(createdAt)=>{
    this.setState(()=>{
        return {
            createdAt:createdAt
        }
    })
}

onFocusChange=({focused})=>{
    this.setState(()=>{
        return {
            calenderFocused:focused
        }
    })
}
render(){
    return (
        <div>
           <form>
              ....//input tags skipped
            <SingleDatePicker
                date={this.state.createdAt}
                onDateChange={this.onDateChange}
                focused={this.state.calendarFocused}
                onFocusChange={this.onFocusChange}
                numberOfMonths={1}
                isOutsideRange={() => false}
            />
              </textarea>
              <button>Add expense</button>
           </form>
        </div>
    )
}
}

Upvotes: 0

Views: 1200

Answers (1)

Shashwat Prakash
Shashwat Prakash

Reputation: 484

You need to use id property to display the date, Like this.

<div>
    <form>
      ....//input tags skipped
      <SingleDatePicker
        date={this.state.createdAt}
        onDateChange={this.onDateChange}
        focused={this.state.calendarFocused}
        onFocusChange={this.onFocusChange}
        numberOfMonths={1}
        isOutsideRange={() => false}
        appendToBody={true}
        id="date"  // Here, need to add id 
      />
      <textarea id="date" value={Your date variable} /> //And here, need to add id and value.
      <button>Add expense</button>
    </form>
  </div>

Upvotes: 1

Related Questions