1.0.18 • Published 10 months ago
@blacksakura013/th-datepicker v1.0.18
Components react native to create a calendar that can run the calendar year, Buddhist era, and Christian era
Usage
import React, { useEffect, useState } from 'react';
import {
SafeAreaView,
Dimensions,
StyleSheet,
useColorScheme,
View,
} from 'react-native';
import {
Colors,
} from 'react-native/Libraries/NewAppScreen';
import { FontSize } from './src/react-native-datepicker-th//src/FontSizeHelper';
import CalendarScreen from '@blacksakura013/th-datepicker'
const deviceWidth = Dimensions.get('window').width;
const deviceHeight = Dimensions.get('window').height;
const App = () => {
const isDarkMode = useColorScheme() === 'dark';
const [Vel1, setVel1] = useState(new Date());
const dateStr = '12/06/1998';
const parts = dateStr.split('/');
const [Vel2, setVel2] = useState(new Date(parts[2], parts[0] - 1, parts[1]));
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};
useEffect(() => {
console.log(Vel1)
}, [Vel1]);
useEffect(() => {
console.log(Vel2)
}, [Vel2]);
return (
<SafeAreaView style={backgroundStyle}>
<View style={{ alignItems: 'center' }}>
<CalendarScreen
language={'th'}
era={'be'}
format={'dd month yyyy'}
borderColor={Colors.buttonColorPrimary}
linkTodateColor={Colors.itemColor}
calendarModel={{ backgroundColor: Colors.backgroundColor, buttonSuccess: { backgroundColor: Colors.itemColor }, pickItem: { color: Colors.itemColor } }}
borderWidth={1}
icon={{ color: Colors.buttonColorPrimary }}
fontSize={FontSize.medium}
fontColor={Colors.fontColor}
width={deviceWidth * 0.95}
borderRadius={10}
onChange={(vel) => setVel1(vel)} />
<CalendarScreen
language={'en'}
era={'bc'}
value={Vel2}
format={'dd mon yyyy'}
width={deviceWidth}
onChange={(vel) => setVel2(vel)} />
</View>
</SafeAreaView>
);
};
export default App;
version 1.0.16 update warning of translations/I18n
custom main styles
NAME | PROPS TYPE | DATA FORMAT | DESCERIPTION |
---|---|---|---|
height | number | 0-99.. | Set the height of the button |
width | number | 0-99.. | Set the width of the button |
fontSize | number | 0-99.. | Set font size of the button |
language | Text | TH/EN | Specify the language to set the desired language (supports English and Thai) |
value | Date | Date() | Set start date |
era | Text | BC/BE | Determine the type of calendar B.C. or B.E. |
format | Text | 'DD/MM/YYYY''DD/MON/YYYY' 'DD/MONTH/YYYY' 'DD-MM-YYYY' 'DD-MON-YYYY' 'DD-MONTH-YYYY' 'DD MM YYYY' 'DD MON YYYY' 'DD MONTH YYYY' | Set the display format of the calendar |
padding | number | 0-99.. | Set the spacing of letters and button edges |
borderRadius | number | 0-99.. | Set the roundness of the button border |
borderColor | Text | color | Set the background color of the borderColor |
backgroundColor | Text | color | Set the background color of the button |
fontColor | Text | color | Set font color |
linkTodateColor | Text | color | Set font color |
custom icon
NAME | PROPS TYPE | DATA FORMAT | DESCERIPTION |
---|---|---|---|
name | Text | 'carlenda' | Set icon image Reference icon from 'react-native-vector-icons/FontAwesome' |
size | number | 0-99.. | Set the icon size |
color | Text | color | Set the icon color |
custom calendarModel
NAME | PROPS TYPE | DATA FORMAT | DESCERIPTION |
---|---|---|---|
backgroundColor | Text | color | Set the calendar background color |
custom calendarModel dropdownlist
NAME | PROPS TYPE | DATA FORMAT | DESCERIPTION |
---|---|---|---|
borderRadius | number | 0-99.. | Set the roundness of the dropdownlist border |
borderWidth | number | 0-99.. | Set the width of the dropdownlist |
borderColor | Text | colorSet the dropdownlist border thickness | |
fontColor | Text | color | Set font color |
backgroundColor | Text | color | Set the background color of the dropdownlist |
custom calendarModel pickItem
NAME | PROPS TYPE | DATA FORMAT | DESCERIPTION |
---|---|---|---|
color | Text | color | Set pickItem color |
custom calendarModel buttonSuccess
NAME | PROPS TYPE | DATA FORMAT | DESCERIPTION |
---|---|---|---|
backgroundColor | Text | color | Set the background color of the buttonSuccess |
fontColor | Text | color | Set the font color of the buttonSuccess |
custom calendarModel buttonSuccess
NAME | PROPS TYPE | DATA FORMAT | DESCERIPTION |
---|---|---|---|
backgroundColor | Text | color | Set the background color of the buttonSuccess |
fontColor | Text | color | Set the font color of the buttonSuccess |
Please install these packages first
1.0.18
10 months ago
1.0.17
11 months ago
0.0.9
11 months ago
0.0.8
11 months ago
0.0.7
11 months ago
0.0.6
11 months ago
1.0.16
2 years ago
1.0.15
2 years ago
1.0.14
2 years ago
1.0.13
2 years ago
1.0.12
2 years ago
1.0.11
2 years ago
1.0.10
2 years ago
1.0.9
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago