0

I need to implement Date-Picker from react-native-paper with this design, start date and end date and I need to choose dates from calendar.

This is the design that I need to implement

This is the design

I create this but it's not the same.

import * as React from 'react';
import { Button } from 'react-native-paper';
import { DateTimePickerModal } from 'react-native-paper-datetimepicker';

function SingleDatePage() {
const [visible, setVisible] = React.useState(false);
const onDismiss = React.useCallback(() => {
setVisible(false);
 }, [setVisible]);

const onChange = React.useCallback(({ date }) => {
setVisible(false);
console.log({ date });
 }, []);

const date = new Date();

return (
<>
  <DateTimePickerModal
    visible={visible}
    onDismiss={onDismiss}
    date={date}
    onConfirm={onChange}
    label="Pick A Date"
  />
  <TextInput value={date.toLocaleString()} />
        <IconButton
          iconPath={require('@assets/icons/calendar.png')}
          type="solid"
          borderColor="yellow" onPress={() => setVisible(true)}>Pick date</IconButton>
  </>
 );
 }

And with this code I got this

enter image description here

Manche
  • 47
  • 2
  • 10
  • What is the question? – Henry Woody Oct 19 '22 at 11:05
  • How to style my date picker same like date picker on the picture? – Manche Oct 19 '22 at 11:07
  • @Manche do you use this package https://github.com/hashiprobr/react-native-paper-datetimepicker? – Kirill Novikov Oct 19 '22 at 11:25
  • No, I use this https://github.com/kuasha420/react-native-paper-datetimepicker Thank you, I will try with your package – Manche Oct 19 '22 at 11:31
  • @KirillNovikov I've got this error Module not found: Error: Can't resolve 'react-native-modal-datetime-picker' in 'D:\pictor-web-and-tablet-portal\node_modules\@hashiprobr\react-native-paper-datetimepicker\src' – Manche Oct 19 '22 at 13:40
  • 1
    @Manche you need to add `react-native-modal-datetime-picker` to your dependencies https://github.com/hashiprobr/react-native-paper-datetimepicker#peer-dependencies – Kirill Novikov Oct 19 '22 at 13:44
  • thank you, its work :) Only one question, datePicker is dark mode, how to change it? – Manche Oct 19 '22 at 13:56
  • @Manche you need to check this property `theme` and check how to work with theming in paper https://callstack.github.io/react-native-paper/theming.html – Kirill Novikov Oct 20 '22 at 07:52
  • https://stackoverflow.com/questions/74390915/react-native-datetimepicker-styling-issue can u help me please, where I'm wrong? – Manche Nov 10 '22 at 18:55

2 Answers2

1

I recommend using https://github.com/react-native-datetimepicker/datetimepicker#usage because React Native Paper follows Material UI design and a lot of stylings a hardcoded inside the library.

Kirill Novikov
  • 2,576
  • 4
  • 20
  • 33
0

Instead of using toLocaleString(), use toLocaleDateString()

In your code, change:

<TextInput value={date.toLocaleString()} />

to

<TextInput value={date.toLocaleDateString()} />

Expo Snack Link: https://snack.expo.dev/@prime4567/datepicker-with-tolocaledatestring?platform=android

Reference: https://www.w3schools.com/jsref/jsref_obj_date.asp

Benny
  • 11
  • 2