lchenfox / react-native-common-date-picker Goto Github PK

We have an option called selectedDateMarkColor so it's updating the background of that selected date. but I want to update the text color also but there is no option to change it

139行，176行，<> </> 这个修改下，用View吧，我这儿RN 0.55版本报错。
我自己版本低？？我也没办法啊，公司就是这么用的。
其他地方也顺便看看吧，拜托。。

请问CalendarList支持默认选中日期阶段嘛？

三栏选日期的时候 滑动日期还得等一会才能反应得过来...

我有两个手机 一个小米 一个华为 只在华为上出现过这个问题

还有 使用 Android Studio 模拟器 也会很卡

• • ! 因为这个原因 不得不考虑其他日期选择组件了

function renderContent() {
return


<CalendarList
containerStyle={{ flex: 1 }}
defaultDate={state.time}
confirmText={'确定'}
cancelText={'取消'}
cancel={toggleVisible}
minDate={data}
maxDate={'2099-6-6'}
confirm={data => {
handleSetTime(data)
}}
/>


}

I hide the default toolbar to use to customized toolbar, how to make it work with the date picker?

展示不全，有时候只展示月份，有时候是年份，年月日展示随机

通过yarn add方式引入，在页面中使用import方式使用时，报错：react-native-common-date-picker模块找不到

CalendarList是否支持defaultValues?

I want to change the font family of text called year, month, and date. Unfortunately, I can't see any parameter named like that. Could you shed some light on that?

can check is something need to add in this ?

<CalendarList
firstDayOnWeeks={0}
showWeeks={false}
minDate='2022-01-01'
maxDate={new Date()}
containerStyle={{ flex: 1 }}
cancel={() => toggleModel(false)}
confirm={data => {
toggleModel(false);
onDateChange(data[0], data[1])
}}
toolBarPosition="bottom"
confirmText="Apply"
/>

Hello,

I am trying to make the CalendarList to focus on a specific date upon appearance by setting defaultDates to some value,
but the component keeps focusing on the minDate. The code below is what i use.

<CalendarList
    containerStyle={{ flex: 1 }}
    titleText="Select Date"
    showToolBar={false}
    cancel={() => setVisibleCallendar(false)}
    onPressDate={(date) => {
        setSelectedCalendarDate(date);
        setVisibleCallendar(false);
    }}
    minDate={'2021-01-01'}
    maxDate={new Date()}
    defaultDates={[new Date(), new Date()]}
/>

In my opinion the expected behavior of a datepicker is to show the current date on render not the minDate.

Is there any way to achieve this?

I'm on version: 2.3.6

Update - Workaround

I found this in the CalendarList source code:

I am using functional components with hooks so i added a React.useRef along with <CalendarList ref={calendarRef} ....otherprops on the component.

Even though this works, i still believe that it would be good to be able to define the initial focus date as part of the provided props.

is possible to add fontFamily for DatePicker

onPressDate 点击两次才能调用一次
应该每次都调用 然后我们可以自己定义底部工具栏 判断是否可以点击

如题，readme中的demo无法跑通

is it possible to disable some dates? as for some reservation systems you cant select certain dates which are booked already.

version: 2.3.4

Issue:
• When the device is set in a negative offset time-zone, we observed that for any date the day is shown ahead of the actual day. i.e. 20 November 2021 is shown on Friday instead of Saturday.
• For a positive offset time-zone, we observed that it is displayed correctly.

Here are two screen shots:

defaultDates={[new Date(), new Date() ]}
after passing this parameter by default not getting selected

CalendarList blocks js thread for some time when opened in modal
Following is example code

import React from 'react'
import { View, StyleSheet } from 'react-native'
import { CalendarList } from "react-native-common-date-picker"
import Modal from 'react-native-modal'


function CalendarDialog(props) {
    const { isVisible, onHideDialog, onConfirmDateRange } = props


    function hideDialog() {
        onHideDialog && onHideDialog()
    }

    function confirmDateRange(range) {
        onConfirmDateRange && onConfirmDateRange(range)
    }

    function renderCalendar() {
        return (
            <View style={styles.container}>
                <CalendarList
                    minDate={'2020-5-23'}
                    maxDate={'2025-6-6'}
                    titleText={'Select Date Range'}
                    cancel={() => hideDialog()}
                    headerTitleType={5}
                    selectedDateMarkType={'circle'}
                    selectedDateMarkColor={'red'}
                    selectedDateMarkRangeColor={'orange'}
                    headerTitleType={2}
                    horizontal={true}
                    pagingEnabled={true}
                    confirm={data => confirmDateRange(data)}
                />
            </View>
        )
    }

    return (
        <Modal
            testID={'modal'}
            isVisible={isVisible}
            style={{margin:0}}
            onBackdropPress={() => hideDialog()}
            onSwipeComplete={() => hideDialog()}
            transparent={true} 
            swipeDirection={['down']}
            propagateSwipe={true}>
            {renderCalendar()}
        </Modal>
    )

}

const styles = StyleSheet.create({
    container: {
        flex: 1, 
        justifyContent: 'flex-end', 
        backgroundColor: 'rgba(0,0,0,0.5)'
    }
})

export default CalendarDialog

<DatePicker confirm={date => { this.confirmDate(date); }} cancel={() => this.dateClear()} cancelText={cancelText} toolBarCancelStyle={{color:'#158EE9',}} confirmText={okText} toolBarConfirmStyle={{color:'#158EE9',}} monthDisplayMode = {'en-long'} maxDate={maxDate} defaultDate={new Date()} // onValueChange={date => this.onDateChange(date)} />