Post
Ask Question

Implement The Custom Calendar Picker In Xamarin.android

Introduction

In this article, I have explained the custom calendar picker in Xamarin.Android. It will help you to change the date in calendar view and you can get the selected calendar date whenever you clicking the button events

Android provides controls for the user to pick a time or pick a date as ready-to-use dialogs. Each picker provides controls for selecting each part of the time (hour, minute, AM/PM) or date (month, day, year).

Step 1

Create a Date picker with a custom button to retrieve the selected calendar date in the calendar picked as below code,

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context="example.javatpoint.com.datepicker.MainActivity">
   <TextView
      android:id="@+id/textView1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_above="@+id/button1"
      android:layout_alignParentLeft="true"
      android:layout_alignParentStart="true"
      android:layout_marginBottom="102dp"
      android:layout_marginLeft="30dp"
      android:layout_marginStart="30dp"
      android:text="" />
   <Button
      android:id="@+id/button1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
      android:layout_centerHorizontal="true"
      android:layout_marginBottom="20dp"
      android:text="Change Date" />
   <DatePicker
      android:id="@+id/datePicker"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_above="@+id/textView1"
      android:layout_centerHorizontal="true"
      android:layout_marginBottom="36dp" />
</RelativeLayout>

Step 2

You can implement the events for the calendar change date button and bind the selected calendar date in the label, like in the below code,

[Activity(Label = "@string/app_name", Theme = "@style/AppTheme.NoActionBar", MainLauncher = true)]
public class MainActivity: AppCompatActivity {
    DatePicker picker;
    Button btn_DisplayDate;
    TextView txt_CurrentDate;
    protected override void OnCreate(Bundle savedInstanceState) {
        base.OnCreate(savedInstanceState);
        Xamarin.Essentials.Platform.Init(this, savedInstanceState);
        SetContentView(Resource.Layout.activity_main);
        txt_CurrentDate = (TextView) FindViewById(Resource.Id.textView1);
        picker = (DatePicker) FindViewById(Resource.Id.datePicker);
        btn_DisplayDate = (Button) FindViewById(Resource.Id.button1);
        txt_CurrentDate.Text = "Current Date: " + getCurrentDate();
        btn_DisplayDate.Click += displayDateClicked;
    }
    private void displayDateClicked(object sender, EventArgs e) {
        txt_CurrentDate.Text = "Current Date: " + getCurrentDate();
    }
    public string getCurrentDate() {
        StringBuilder builder = new StringBuilder();;
        builder.Append((picker.Month + 1) + "/");
        builder.Append(picker.DayOfMonth + "/");
        builder.Append(picker.Year);
        return builder.ToString();
    }
}

Output

Hopefully, this article has given you sufficient information to start creating your custom calendar picker in your Xamarin.Android application. Feel free to leave a comment if you would like me to further elaborate on anything within this article.


Similar Articles