接上集https://www.jianshu.com/p/483bdcd045e5
引用
<TouchableOpacity
style={{paddingHorizontal:10,paddingVertical:5,borderColor:'#08107b',borderWidth:1,borderRadius:8.5}}
onPress={()=>{
CalendarSelect.select(res=>{
if(res){}
})
}}
>
Text style={{ fontSize: 14, textAlign: 'left',color:'#08107b'}}>{ '点击选择'}</Text>
</TouchableOpacity>
/**
* @author q
* @description 日期选择
*/
import React, { Component , useEffect} from 'react';
import NavigationBar from "../../components/NavigationBar";
import { RouterHelper } from '../../utils';
import DeviceStorage from '../../utils/DeviceStorage';
import { CalendarList, Agenda, LocaleConfig, Calendar} from 'react-native-calendars';
import { View, StyleSheet,Dimensions, Text,TouchableOpacity } from 'react-native';
import * as api from '@/api/apicommon';
import dayjs from 'dayjs';
import { Toast } from '@ant-design/react-native';
LocaleConfig.locales['zh'] = {
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
monthNamesShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
today: '今天'
};
LocaleConfig.defaultLocale = 'zh';
let monthChage = true;
let currentMonths = '';
const {width, height} = Dimensions.get('screen');
export default class CalendarSelect extends Component<any> {
callback = (data: any) => { }
static select(callback: (data: any) => void) {
RouterHelper.navigate('CalendarSelect', { callback })
}
static hide() {
RouterHelper.back()
}
state = {
show: false,
initVal: "",
selectDate:'',
selectTime:'',
// currentMonth:new Date().getMonth(),
selectedDate: new Date(), // 初始日期
currentMonth: new Date(), // 当前显示的月份
markedDates:{
"2024-04-04": { markingType:'dot',marked:true,
customStyles:{container:{backgroundColor:'#fff',width:50,height:50},text:{color:'red'}},
},
'2024-04-05': { markingType:'dot',marked:true,
customStyles:{container:{backgroundColor:'#fff',width:50,height:50},text:{color:'red'}},
},
'2024-04-06': { markingType:'dot',marked:true,
customStyles:{container:{backgroundColor:'#fff',width:50,height:50},text:{color:'red'}},
},
'2024-05-01': { markingType:'dot',marked:true,
customStyles:{container:{backgroundColor:'#fff',width:50,height:50},text:{color:'red'}},
},
'2024-05-02': { markingType:'dot',marked:true,
customStyles:{container:{backgroundColor:'#fff',width:50,height:50},text:{color:'red'}},
},
'2024-05-03': { markingType:'dot',marked:true,
customStyles:{container:{backgroundColor:'#fff',width:50,height:50},text:{color:'red'}},
},
'2024-05-04': { markingType:'dot',marked:true,
customStyles:{container:{backgroundColor:'#fff',width:50,height:50},text:{color:'red'}},
},
'2024-05-05': { markingType:'dot',marked:true,
customStyles:{container:{backgroundColor:'#fff',width:50,height:50},text:{color:'red'}},
},
// '2024-05-01': { markingType:'dot', dotColor: 'blue',marked:true,selected: true},
}
}
// 当按钮被点击时，更改月份
changeMonth = (month) => {
const newDate = new Date(month);
this.setState({ currentMonth: newDate });
};
componentDidMount() {
this.callback = this.props.navigation.getParam("callback");
currentMonths = dayjs(new Date()).format('YYYY-MM');
// XLoading.show()
this.setState({
show:true,
})
try {
DeviceStorage.get("CalendarSelect")
.then(res=>{
if(res){
this.setState({
form : res
})
}
})
this.getHoliday()
} catch (error) {console.log(error)}
}
getHoliday=()=>{
api.getData('/appointment/getNoWork')
.then(res => {
console.log("/appointment/getNoWork>>>>>>>>",JSON.stringify(res))
if(res.code == 200 && res.data){
let markedDatesList = {}
res.data.map((item, index)=>{
markedDatesList[item] = { markingType:'dot',marked:true,
customStyles:{container:{backgroundColor:'#fff',width:50,height:50},text:{color:'red'}},
}
})
this.setState({
markedDates:markedDatesList
})
console.log('sd>>>>>>>>',markedDatesList)
}
})
}
_onPress = (day) => {
// success
CalendarSelect.hide()
this.props.navigation.state.params.callback(day)
}
// 日历 start
handleDayPress = (day) => {
console.log('selected day', day, day.timestamp);
// 你可以在这里更新 markedDates 或执行其他操作
if(this.state.markedDates.hasOwnProperty(day.dateString)){
// return alert ("休日不建议选择")
return Toast.info("休息日不建议选择",1) // 停留1秒
}
this.setState({
selectDate: day.dateString
},()=>{
this._onPress(day.dateString)
// if(this.state.selectDate != '' && this.state.selectTime != ''){
// this._onPress(day.dateString + "|" + this.state.selectTime)
// }else{
// return alert ("请选择上午还是下午")
// }
})
};
handleTimePress = (time)=>{
this.setState({
selectTime: time
},()=>{
if(this.state.selectDate != '' && this.state.selectTime != ''){
this._onPress(this.state.selectDate + "|" + time)
}else{
return alert ("请选择日期")
}
})
}
handleMonthChange = (month) => {
currentMonths = month.dateString;
console.log('month changed>>>', month, currentMonths);
};
// 更新当前显示的月份
updateCurrentMonth = (month) => {
if(monthChage) {
monthChage = false;
this.setState({ currentMonth: month },()=>{
monthChage = true
});
}
};
// 通过按钮选择月份
onButtonPress = (offsetMonths) => {
const currentMonth = new Date(currentMonths);
currentMonth.setMonth(currentMonth.getMonth() + offsetMonths);
currentMonths = currentMonth.toString();
this.updateCurrentMonth(currentMonth);
};
// 日历 end
render() {
const { currentMonth } = this.state;
return <View style={{ flex: 1, backgroundColor: '#f8f8f8'}}>
<NavigationBar title="时间选择" />
<CalendarList
firstDay={1}
current={currentMonth}
// dayComponent = {renderDayComponent}
monthFormat={'yyyy年MM月'}
// minDate={new Date().toISOString().split('T')[0]}
// calendarHeight={height}
calendarWidth={width}
horizontal={true}
pagingEnabled={true}
markedDates={this.state.markedDates}
markingType='custom'
onDayPress={this.handleDayPress}
onMonthChange={this.handleMonthChange}
// showScrollIndicator={true}
/>
{/* <View style={{flexDirection:'row',justifyContent:'space-around',marginTop:20}}>
<TouchableOpacity
onPress={()=>{
this.handleTimePress('上午')
}}
>
<Text style={styles.fontStyles}>上午</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={()=>{
this.handleTimePress('下午')
}}
>
<Text style={styles.fontStyles}>下午</Text>
</TouchableOpacity>
</View> */}
<View style={{flexDirection:'row',justifyContent:'space-around',marginTop:20}}>
<TouchableOpacity
onPress={() => this.onButtonPress(-1)}
>
<Text style={styles.fontStyles}>上个月</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => this.onButtonPress(+1)}
>
<Text style={styles.fontStyles}>下个月</Text>
</TouchableOpacity>
</View>
</View>
}
}
const styles = StyleSheet.create({
item: {
flexDirection: 'row',
marginLeft: 14.5,
marginRight: 15.5,
borderRadius: 12.5,
paddingHorizontal: 10,
paddingVertical: 9.5,
marginBottom: 15,
justifyContent: 'space-between'
},
textStyle: {
borderColor:'#08107b',
paddingVertical:8,
paddingHorizontal:40,
borderWidth:1,
borderRadius:12.5,
color:'#fff',
fontSize:16,
backgroundColor: '#08107B'
},
send_btn: {
justifyContent:'center',
marginVertical:20,
alignContent:'center',
alignItems:'center'
},
fontStyles:{
fontSize:16,
textAlign:'center',
padding:10
}
})
