DatePicker does not show the text - xaml

Question

I have created both a DatePicker and a TimePicker, but what I see is only the underlining, while the text always appears transparent, I cannot read it. It is still clickable but not readable
<yummy:PancakeView x:Name="CreatePageDiary" IsVisible="False" Grid.Row="1" CornerRadius="15,15,0,0" BackgroundColor="LightBlue" VerticalOptions="FillAndExpand">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="5"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<BoxView BackgroundColor="Blue" Grid.Row="0"/>
<BoxView BackgroundColor="Green" Grid.Row="1"/>
<Grid Margin="15" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="15"/>
<RowDefinition Height="15"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<BoxView CornerRadius="100" Grid.Row="0" Grid.RowSpan="2" Grid.Column="4" HorizontalOptions="End" WidthRequest="40">
<BoxView.Background>
<LinearGradientBrush StartPoint="1,0" EndPoint="1,1">
<GradientStop Color="Blue" Offset="0" />
<GradientStop Color="LightBlue" Offset="1.0" />
</LinearGradientBrush>
</BoxView.Background>
</BoxView>
<BoxView x:Name="BVGrayDiary" CornerRadius="100" Grid.Row="0" Grid.RowSpan="2" Grid.Column="4" HorizontalOptions="End" WidthRequest="40" BackgroundColor="Gray"/>
<Image Source="checked.png" Grid.Row="0" Grid.RowSpan="2" Grid.Column="4" HorizontalOptions="End" HeightRequest="20" Margin="0,0,10,0"/>
<Button x:Name="BTSaveDiary" IsVisible="False" BackgroundColor="Transparent" Grid.Row="0" Grid.RowSpan="2" Grid.Column="4" HorizontalOptions="End" HeightRequest="25" Clicked="BTSaveDiary_Clicked"/>
<Grid Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3" HorizontalOptions="End" BackgroundColor="Transparent" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="15"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="calendardataPicker"/>
<DatePicker Grid.Column="1" x:Name="DataPicker" TextColor="Blue"/>
<DatePicker Grid.Column="1" x:Name="DataPickerVisual" Visual="Material" Opacity="0"/>
</Grid>
<StackLayout Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3" HorizontalOptions="Center" Orientation="Horizontal" >
<Image Source="clockTimePicker"/>
<TimePicker x:Name="TimePicker" TextColor="Blue"/>
</StackLayout>
//other code

Answer 1

but what I see is only the underlining, while the text always appears transparent, I cannot read it. It is still clickable but not readable.
From your screenshot, I guess that you set the same color for contentpage's backgroundcolor and DatePicker and TimePicker TextColor, so you can not see the text.
Don't see TextColor or set other color for DatePicker and TimePicker.
<StackLayout BackgroundColor="Green">
<DatePicker TextColor="Red"></DatePicker>
<TimePicker TextColor="Red"></TimePicker>
</StackLayout>
Update
From your code, I don't have yummy:PancakeView, so I use frame to replace yummy:PancakeView.
Please set the second Grid RowDefinition Height="Auto" or higher, then DatePicker and TimePicker will display correctly.
<Frame
x:Name="CreatePageDiary"
CornerRadius="15"
VerticalOptions="FillAndExpand">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="5" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<BoxView Grid.Row="0" BackgroundColor="Blue" />
<BoxView Grid.Row="1" BackgroundColor="Green" />
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<BoxView
Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="4"
CornerRadius="100"
HorizontalOptions="End"
WidthRequest="40">
<BoxView.Background>
<LinearGradientBrush StartPoint="1,0" EndPoint="1,1">
<GradientStop Offset="0" Color="Blue" />
<GradientStop Offset="1.0" Color="LightBlue" />
</LinearGradientBrush>
</BoxView.Background>
</BoxView>
<BoxView
x:Name="BVGrayDiary"
Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="4"
BackgroundColor="Gray"
CornerRadius="100"
HorizontalOptions="End"
WidthRequest="40" />
<Image
Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="4"
Margin="0,0,10,0"
HeightRequest="20"
HorizontalOptions="End"
Source="check.png" />
<Button
x:Name="BTSaveDiary"
Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="4"
BackgroundColor="Transparent"
HeightRequest="25"
HorizontalOptions="End"
Text="test" />
<Grid
Grid.Row="0"
Grid.Column="1"
Grid.ColumnSpan="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="15" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="favorite.png" />
<DatePicker
x:Name="DataPicker"
Grid.Column="1"
Date="06/21/2018"
TextColor="Blue" />
<DatePicker
x:Name="DataPickerVisual"
Grid.Column="1"
Opacity="0"
Visual="Material" />
</Grid>
<StackLayout
Grid.Row="1"
Grid.Column="1"
Grid.ColumnSpan="3"
HorizontalOptions="Center"
Orientation="Horizontal">
<Image Source="favorite.png" />
<TimePicker x:Name="TimePicker" TextColor="Blue" />
</StackLayout>
</Grid>
</Grid>
</Frame>
The screen that I test: