Premiers pas avec le sélecteur de date et d'heure pour Xamarin

Découvrez le nouveau contrôle Sélecteur de date et d'heure dans Telerik UI pour Xamarin et découvrez comment laisser facilement les utilisateurs sélectionner des dates, des heures ou une combinaison des deux dans vos applications Xamarin.

Dans la première version de Telerik UI pour Xamarin en 2020, nous avons introduit un nouvel ensemble de commandes de sélecteur: Sélecteur de liste Sélecteur de date et d'heure et Sélecteur de modèle (personnalisé) .

Le nouveau Telerik Interface utilisateur pour Xamarin Le sélecteur de date et d'heure permet à vos utilisateurs de sélectionner des dates et des heures dans une variété de cas d'utilisation différents. Par exemple, si vous souhaitez louer une voiture, vous aurez certainement besoin d'un sélecteur de date et d'heure. Vous développez une application d'alarme? Le sélecteur de temps vous permettra de mettre en œuvre facilement un sélecteur de temps pour votre alarme quotidienne. Si vous travaillez sur une application de réservation / réservation, vos utilisateurs devront choisir une date pour effectuer une réservation. Quel que soit le cas d'utilisation, notre contrôle Date Picker pour Xamarin est là pour vous aider à accélérer votre développement!

Le DateTimePicker est une combinaison d'un DatePicker et d'un TimePicker . Vous pouvez facilement choisir une date, une heure ou une combinaison des deux en fonction de la chaîne de format utilisée.

Comme dans le sélecteur de liste ses éléments sont visualisé à l'intérieur d'une popup. Le contrôle DateTime Picker possède un certain nombre de fonctionnalités qui vous permettent de définir une plage de dates Format DateTime et de personnaliser entièrement l'apparence de la boîte de dialogue, comme son en-tête et son pied de page.

blog, je vais vous familiariser avec le contrôle DateTime Picker et les fonctionnalités qu'il propose.

Format de chaîne

Le sélecteur de date et d'heure pour Xamarin vous permet d'utiliser des chaînes de format de date et d'heure standard ou personnalisées Via la propriété SpinnerFormatString . Selon le format défini, le sélecteur visualise les commandes de spinner avec des valeurs préremplies à sélectionner. Cette fonction vous permet de créer un sélecteur de date, un sélecteur d'heure ou une combinaison des deux.

Sélecteur de date

 < telerikInput: RadDateTimePicker   StartDate  =  "2019,12,25"  
    EndDate  =  "2020,02,14"   
    SpinnerFormatString [19659014] =  "d"  /> 

Time Picker

 < telerikInput: RadDateTimePicker   StartDate  =  "2019,12,25"  
    EndDate  =  "2020,02,14"   
    SpinnerFormatString  = =  "T"   
    D isplayStringFormat  =  "HH: mm: ss"   
    Placeholder  =  "Choisissez un moment!"   
    AreSpinnerHeadersVisible  =  "True"  /> 

DateTime Picker

 < telerikInput: RadDateTimePicker   > 

Et voici l'aspect par défaut du contrôle Sélecteur de date et d'heure:

Plage de dates

La date de début ] Et EndDate dans DateTimePicker sont utilisées pour définir la date la plus ancienne et la plus récente pouvant être sélectionnée dans le sélecteur.

 < telerikInput: RadDateTimePicker   StartDate  =  "2020,02,14"  
    EndDate  =  "2020,12,31"  /> 

L'option SelectedDate vous permet de définir la date qui sera sélectionnée lorsque la boîte de dialogue du sélecteur est ouvert.

Format DisplayString

La propriété DisplayStringFormat définit le texte qui sera affiché lorsque la date / heure est sélectionnée, et vous pouvez également lui appliquer une chaîne de format. Le format défini pour DisplayStringFormat doit être un format datetime valide.

Exemple de code:

 < telerikInput: RadDateTimePicker   AreSpinnerHeadersVisible  =  "True"  
    SpinnerFormatString  =  = 1965 "T"   
    Placeholder  =  "SELECT TIME!"   
   [19659017] DisplayStringFormat  =  "H: mm tt"  /> 

et le résultat lorsque DisplayStringFormat = "H: mm tt"

API de style flexible

Nous avons exposé une API de style flexible qui vous permet de concevoir le sélecteur de date et d'heure parfait pour votre application mobile.

 » title= »date-time-picker-style »/> [19659003]
Pour plus d'informations et un exemple de démonstration, veuillez consulter notre article Styling .

DateTimePicker for Xamarin.Forms Demo

Créons une démonstration qui vous permet de demander une voiture pour votre voyage. Le sélecteur de date et d'heure sera utilisé pour choisir une date et une heure pour le voyage.

Voici un exemple de modèle TripData:

 public   classe   TripData  
   { 
    public   DateTime Date { get ;  set ; }   
    public   DateTime Heure { get ;  set ; }   
    public   chaîne   Coût { get ;  set ; }   
  } 

et la classe ViewModel:

 public   classe   ViewModel  
   {[ 
    public   ViewModel ()   
    {  
    this  .Data =  new   ObservableCollection    
    {  
    nouveau   TripData {Date =  nouveau   DateTime (2020,02,18), Time =  nouveau   DateTime (2020, 02,18,17,26,20), Cost =  "29 $" },   
    nouveau   TripData {Date =  nouveau   DateTime (2020,01,8), Time =  nouveau   DateTim e (2020,01,8,15,21,21), coût =  "24 $" },   
    nouveau   TripData {Date =  nouveau   DateTime (2019,10,28), Time =  nouveau   DateTime (2019,10,28,7,15,15), Cost =  " 8 $ "},   
    nouveau   TripData {Date =  nouveau   DateTime (2019,09,28), Heure =  nouveau   DateTime (2019,09,28,15,43,43), coût =  "21 $" },   
  [1945902929] ]  nouveau   TripData {Date =  nouveau   DateTime (2019,09,15), Time =  nouveau   DateTime (2019,09,15,6,12,12 ), Coût =  "33 $" },   
   };   
   }   
    public   ObservableCollection  Data { get ;  set ; }   
  } 

Définition du sélecteur de date et d'heure dans XAML:

 < ContentPage.BindingContext >  [19659002]    < local: ViewModel  />   
   </  ContentPage.BindingContext >>  
   < ContentPage.Content >  
    < Grille >   
    < Grid.RowDefinitions >   
    < RowDefinition   ] Hauteur  =  "60"  />   
    < RowDefinition   Hauteur  = [19659015] "Auto"  />   
    < RowDefinition   Hauteur  =  "*"  />   
    < RowDefinition   Hauteur  =  "Auto"  />   
    </  Grid.RowDefinitions >   
    < StackLayout   Grid.Row  =  "0"   BackgroundColor  =  "# EAEAEA"   HeightRequest  =  "60" >   
    < Image [19659013] Source  =  "graphic.png"   VerticalOptions  =  "End"   HorizontalOptions  =  "End"  />   
   [19659143] </  StackLayout >   
    < StackLayout   Margin  =  "16, 40 , 16, 0 "  Grid.Row  = " 1 ">   
    < Étiquette   ] Text  =  "Good Afternoon, Joe"   TextColor  =  "# 007AFF"   FontSize  =  "22"   Margin [19659014] =  "0,0,0,24"  />   
    < Étiquette   Texte  =  "Planifier un voyage:"   TextColor  =  "Noir"   FontSize  =  "15"   FontAttributes  =  "Bold "  Marge  = " 0, 0, 0, 21 " />   
    < ] telerikInput: RadDateTimePicker   x: Name  =  "genrePicker"   
    PlaceholderLabelStyle  =  "{StaticResource } "  
    DisplayLabelStyle  = " {StaticResource DisplayLabelStyle} "  
   [19659337] TabStripItemStyle  =  "{StaticResource TabStripItemStyle}"   
    SelectedDate  =  "2019,9,10"   
    Placeholder  =  "Select Date & Time"  />   
  
    < telerikPrimitives: RadBorder   Style  =  "{StaticResource BorderStyle}"   />   
  
    <  telerikInput: RadListPicker   Placeholder  =  "Pickup Location"   IsEnabled  =  "False"  />   
  
    < telerikPrimitives: RadBorder   Style  =  "{StaticResource DisabledBorderStyle}"  />   [19659002]  
    < telerikInpu t: RadListPicker   Placeholder  =  "Destination Loacation"   IsEnabled  =  "False"  />   
  [19659002]    < telerikPrimitives: RadBorder   Style  =  "{StaticResource DisabledBorderStyle}"  />   
  
    < Label   Text  =  "Past Trips:"   TextColor  =  "# 919191"   FontAttributes  =  "Bold"   FontSize  =  "15"   Margin  =  "0, 25, 0, 0" [19659014] />   
    </  StackLayout >   



  


               




  
    < telerikDataControls: RadListView [19659013] Grid.Row  =  "2"   ItemsSource  =  "{Binding Data}"   Margin  =  "16,0,16, 0 ">   
    < telerikDataControls: RadListView.ItemTemplate >   
    < DataTemplate >   
    < listView: ListViewTemplateCell >   [19659002]    < listView: ListViewTemplateCell.View >   
    < Grille  >   
    < Grid.RowDefinitions >   
    < RowDefinition   Hauteur  =  "Auto " />   
    < RowDefinition   Hauteur  = " Auto " />  ]  
    </  Grid.RowDefinitions >   
    < Grid.ColumnDefinitions >   
    < ColumnDefinition   Largeur  = [19659015] "2 *"  />   
    < ColumnDefinition   Largeur  =  "*" [19659014] />   
    </  Grid.ColumnDefinitions >   
   [19659462] < StackLayout   Grid.Column  =  "0"   Orientation  =  "Horizontal"   Marge  =  "0, 15, 10, 15 "  Options verticales  = " Centre ">   
    < Étiquette   Text  =  "{Binding Date, StringFormat = '{0: MMM d yyyy}'}"   Style  =  "{StaticResource ListViewLabelStyle}"   />   
    < Label   Texte  =  "| "  FontAttributes  = " Bold "  TextColor  = " Black "  Margin  = " 0,0,0,2 "[19659014] />   
    < Label   Text  =  "{Binding Time, StringFormat = '{0: hh : mm tt} '} "  Style  = " {StaticResource ListViewLabelStyle} "  />   
    </ [19659012] StackLayout >   
    < StackLayout   Grid.Column  =  "1"   Options horizontales  =  "Fin"   VerticalOptions  =  "Centre"   Marge  =  "0,0,10,0" >  ]  
    < Label   Text  =  "{Binding Cost}"   FontSize  =  "12"   TextColor  =  "# 919191"   VerticalOptions  =  "Center"   HorizontalOptions  =  "Center"  />  ]  
    </  StackLayout >   
    < telerikPrimitives: RadBorder   Style  =  "{StaticResource DisabledBorderStyle}"   Grid.ColumnSpan  =  "2"   Grid.Row  =  "1"   Marge  =  "0"  />   
    </  Grille >   
    </  listView: ListViewTemplateCell.View >   
    </  listView: ListViewTemplateCell >   
    </  DataTemplate [19659014]>   
    </  telerikDataControls: RadListView.ItemTemplate >   
    </  telerikDataControls: RadListView >   
  
    < StackLayout   Grid.Row  =  "3"   BackgroundColor  =  "# EAEAEA"   HeightRequest  =  "65" >   
    < telerikPrimitives: RadBorder   VerticalOptions  =  "CenterAndExpand"   
    WidthRequest  =  "200"   
    HeightRequest  =  "40"   
    Options horizontales  =  " CenterAndExpand ">   
    < telerikInput: RadButton   Texte  =  "Demander une voiture"   
    CornerRadius  =  "20"   
    Rembourrage  =  "10,5,10,5"   
    BorderColor  =  "# 007AFF "  
    BorderWidth  = " 1 "  
    TextColor  =  "# 007AFF"   
    FontSize  =  "15"   
    Clicked  =  "OnCarRequested"   [19659002]    BackgroundColor  =  "Transparent"  />   
    </  telerikPrimitives: RadBorder >   
    </  StackLayout >   
    </  Grille >   
   </  ContentPage.Content > 

Vous devez également ajouter les éléments nécessaires styles à la page Ressources:

 < Con tentPage.Resources >  
    < ResourceDictionary >   
    <  Style   TargetType  =  "Label"   x: Key  =  "PlaceholderLabelStyle" >   
    < Setter   Propriété  =  "TextColor"   Valeur  =  "# 919191"  />   
    </  Style >   
    < Style   TargetType  =  "Label"   x: Key  =  "DisplayLabelStyle" >   
    <[19659012] Setter   Propriété  =  "Text Couleur "  Valeur  = " Noir " />   
    < Setter   Propriété [19659014] =  "FontAttributes"   Valeur  =  "Bold"  />   
    </  Style >   
    < Style   TargetType  =  "telerikPrimitives: RadBorder"   x: Key  =  "BorderStyle" >   
    < Setter   Propriété  =  "BorderColor "  Valeur  = " # 919191 " />   
    < Setter   Propriété  ] =  "BorderThickness"   Valeur  =  "0, 0, 0, 1"  />   
    < Setter   Propriété  =  "Marge "  Valeur  = " 0, 8, 0, 15 " />   
    </  Style >   
    < Style   TargetType  =  "telerikPrimitives: RadBorder"   x: Key [19659014] =  "DisabledBorderStyle" >   
    < Setter   Propriété  =  "BorderColor"   Valeur  =  "# 919191"  />   
    < Setter   Propriété  =  "BorderThickness"   Valeur  =  "0, 0, 0, 0,3"  />   
    < Setter   Propriété  =  "Marge"   Valeur  =  "0, 8, 0, 15 " />   
    </  Style >   
  ]   < Style   TargetType  =  "Label"   x: Key  =  "ListViewLabelStyle" >   
    < Setter   Propriété  =  "TextColor"   Valeur  =  "# 000000" [19659014] />   
    < Setter   Propriété  =  "FontSize"   Valeur  = [19659015] "12"  />   
    < Setter   Propriété  =  "VerticalTextAlignment"   Valeur  =  "Center"  />   
    < Setter   Propriété  =  "HorizontalTextAlignment"   Valeur  =  "Start"  />   
    </  Style >   
    < Style   ] TargetType  =  "telerikInput: DateTimeSelectorTabStripItem"   x: Key  =  "TabStripItemStyle" >   
   19659224] < Setter   Propriété  =  "HorizontalTextAlignment"   Valeur  =  "Center"  />   
 
    < Setter   Propriété  =  "VerticalTextAlignment"   Valeur  =  "Center"  />   
    < Setter   Propriété  =  "TextColor"   Valeur  =  "Gray"  />   
    < Setter   Propriété  =  "SelectedColor"   Valeur  =  "# 007AFF" [19659014] />   
    < Setter   Propriété  =  "HeightRequest"   Valeur  = [[19659015] "60"  />   
    < Setter   Propriété  =  "FontSize"   Valeur  =  "21"  />   [19659002]    < Setter   Propriété  =  "FontAttributes"   Valeur  =  "Bold"  />   
    </  Style >   
  
   [19659136] </  ResourceDictionary >   
   </  ContentPage.Resources > 

Voici le résultat final:

Dites-nous ce que vous pensez

Nous aimerions savoir ce que vous pensez du contrôle du sélecteur de date et d'heure et comment nous pouvons continuer à l'améliorer. Si vous avez des idées de fonctionnalités à ajouter, n'hésitez pas à partager ces informations avec nous sur notre Telerik UI for Xamarin Feedback portal .

N'oubliez pas de consulter les différentes démos du contrôle in our SDK Sample Browser and the Telerik UI for Xamarin Demos application.

If you have not yet tried the Telerik UI for Xamarin suite, take it out for a spin with a 30-day free trialoffering all the functionalities and controls at your disposal at zero cost.

Start Your Trial

Happy coding with our controls and stay with us! If you are curious about Custom Picker and its usage, we would love to share more with you in our upcoming blog post about Getting Started with Templated (Custom) Picker for Xamarin :). And don't forget to check out our post on Getting Started with the List Picker as well.