@blacksakura013/th-datepicker

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

'react-native-vector-icons/FontAwesome'

'@react-native-picker/picker'

'react-native-localize'

'react-native-responsive-screen'