Closed vinayakvinayam closed 4 years ago
CalendarPicker defaults to opening to today's date & month. If you'd like it to show a different month, use the initialDate
prop.
https://github.com/stephy/CalendarPicker#calendarpicker-props
You'll need to assemble the selected month & year into a [Moment] Date object and pass it to initialDate
.
How can we change the year or month directly with the refs?
Hello Guys,
I have done it with:
initialDate={new Date(this.state.selectedYear, this.state.selectedMonth, 1)}
Hope this will help anyone else.
Remember to -1 with the value of month because January's value is 0 in these props.
this.setState({ selectedMonth: value - 1 })
Thanks a Lot @AurangsEmpire your solution is working. You saved my time
i have 2 drop downs of month and year, i will select them and pass to the getList Function. when i pass the month and year and press submit button i am receiving the data but the calendar should change as per the selected month and year its
import React, { Component } from 'react'; import { View, Picker,Button, StyleSheet} from 'react-native'; import CalendarPicker from 'react-native-calendar-picker'; import moment from 'moment'; import OfflineNotice from './OfflineNotice' import { mainUrl } from '../routes/AppRoutes'; import AsyncStorage from '@react-native-community/async-storage';
export default class AttendanceScreen extends Component { constructor(props){ super(props); this.state = { getList: [], getMonth: [], getYear:[], year: '', month: '' } this.getList = this.getList.bind(this) this._mapDatesFunction = this._mapDatesFunction.bind(this) this.getMonth = this.getMonth.bind(this) this.getYear =this.getYear.bind(this) }
componentWillMount() { // this.getList(), this.getMonth(), this.getYear() }
componentDidMount(){ this.getList }
getMonth = async () => { try { const token = await AsyncStorage.getItem('authToken'); if (token) fetch(mainUrl + '/common/getMonth', { method: "GET", headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'Authorization':
Bearer ${token}
, }, }).then((response) => response.json()) .then((res) => { // console.log(res) if (res.status_code === 200) { this.setState({ getMonth:res.data.month }) } else { alert('Oops!!! Something Went Wrong') } }) .done() } catch (error) { } }getYear = async () => { try { const token = await AsyncStorage.getItem('authToken'); if (token) fetch(mainUrl + '/common/getYear', { method: "GET", headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'Authorization':
Bearer ${token}
, }, }).then((response) => response.json()) .then((res) => { // console.log(res) if (res.status_code === 200) { this.setState({ getYear:res.data.year }) } else { alert('Oops!!! Something Went Wrong') } }) .done() } catch (error) { } }getList = async () => { try { const token = await AsyncStorage.getItem('authToken'); if (token) fetch(mainUrl + '/employeeAttendance/list', { method: "POST", headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'Authorization':
Bearer ${token}
, }, body: JSON.stringify({ 'year' :this.state.year, 'month' : this.state.month }) }).then((response) => response.json()) .then((res) => { // console.log(res) if (res.status_code === 200) { this.setState({ getList: res.data.employeeAttendance}); } else { alert('Oops!!! No Record found this Month') } }) .done() } catch (error) { } }_mapDatesFunction = (getList) => getList.map(emp => ( { date: moment(emp.attendanceDate), style: {backgroundColor: emp.attendanceType.name === "Present" ? "green" : "red"}, textStyle: {color: 'white'}, } ));
render() { console.log(this.state) const {getList} = this.state; return (
} }
const styles = StyleSheet.create({ container: { height: '100%', width: '100%' } })