Create a Simple Date Picker Control In Windows Phone 7

In this article, we will discuss how to easily create a Date Picker Control in Windows Phone 7. By this control, we can set the date as needed when we click on the Plus Buttons. The month, day and year will be incremented and when we will click on the Minus Button it will be decremented.



Step 1

First we will use the following buttons to show the month, day and year, increment and decrement and set the date. Here we can also use a TextBox to show the date.

<Button Content="+" Margin="10,76,349,459" Name="btnAddMonth" FontWeight="Bold" FontSize="28" Click="btnAddMonth_Click">

                <Button.Background>

                    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                        <GradientStop Color="Black" Offset="0" />

                        <GradientStop Color="#FFC1BCBC" Offset="1" />

                    </LinearGradientBrush>

                </Button.Background>

            </Button>

            <Button Content="01" Height="72" Margin="10,121,349,0" Name="btnMonth" VerticalAlignment="Top" />

            <Button Content="-" Height="72" Margin="10,167,349,0" Name="btnMinusMonth" VerticalAlignment="Top" FontWeight="Bold" FontSize="28" Click="btnMinusMonth_Click">

                <Button.Background>

                    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                        <GradientStop Color="Black" Offset="0" />

                        <GradientStop Color="#FFC1BCBC" Offset="1" />

                    </LinearGradientBrush>

                </Button.Background>

            </Button>

            <Button Content="+" Height="72" Margin="113,76,246,0" Name="btnAddDay" VerticalAlignment="Top" FontWeight="Bold" FontSize="28" Click="btnAddDay_Click">

                <Button.Background>

                    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                        <GradientStop Color="Black" Offset="0" />

                        <GradientStop Color="#FFC1BCBC" Offset="1" />

                    </LinearGradientBrush>

                </Button.Background>

            </Button>

            <Button Content="-" Height="72" Margin="113,167,246,0" Name="btnMinusDay" VerticalAlignment="Top" FontWeight="Bold" FontSize="28" Click="btnMinusDay_Click">

                <Button.Background>

                    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                        <GradientStop Color="Black" Offset="0" />

                        <GradientStop Color="#FFC1BCBC" Offset="1" />

                    </LinearGradientBrush>

                </Button.Background>

            </Button>

            <Button Content="01" Margin="113,121,246,414" Name="btnDay" />

            <TextBlock Height="43" HorizontalAlignment="Left" Margin="24,27,0,0" Name="textBlock1" Text="Month" VerticalAlignment="Top" Width="83" FontWeight="Bold" FontSize="25" />

            <TextBlock FontSize="25" FontWeight="Bold" Height="43" HorizontalAlignment="Left" Margin="125,27,0,0" Name="textBlock2" Text="Day" VerticalAlignment="Top" Width="97" />

            <Button Content="+" Margin="224,76,108,459" Name="btnAddYear" FontWeight="Bold" FontSize="28" Click="btnAddYear_Click">

                <Button.Background>

                    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                        <GradientStop Color="Black" Offset="0" />

                        <GradientStop Color="#FFC1BCBC" Offset="1" />

                    </LinearGradientBrush>

                </Button.Background>

            </Button>

            <Button Content="1986" Margin="224,121,108,0" Name="btnYear" Height="72" VerticalAlignment="Top" />

            <Button Content="-" Margin="224,167,108,368" Name="btnMinusYear" FontWeight="Bold" FontSize="28" Click="btnMinusYear_Click">

                <Button.Background>

                    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                        <GradientStop Color="Black" Offset="0" />

                        <GradientStop Color="#FFC1BCBC" Offset="1" />

                    </LinearGradientBrush>

                </Button.Background>

            </Button>

            <TextBox Height="72" HorizontalAlignment="Left" Margin="6,319,0,0" Name="txtSetDate" Text="" VerticalAlignment="Top" Width="387" Visibility="Collapsed" Foreground="White" BorderBrush="{x:Null}" FontWeight="Bold" TextAlignment="Center">

                <TextBox.Background>

                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                        <GradientStop Color="Black" Offset="0" />

                        <GradientStop Color="White" Offset="1" />

                    </LinearGradientBrush>

                </TextBox.Background>

            </TextBox>

            <Button Content="Set Date" Margin="24,241,217,294" Name="btnSetDate" FontWeight="Bold" Click="btnSetDate_Click">

                <Button.Background>

                    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                        <GradientStop Color="Black" Offset="0" />

                        <GradientStop Color="#FFBEB6B6" Offset="1" />

                    </LinearGradientBrush>

                </Button.Background>

            </Button>

            <TextBlock FontSize="25" FontWeight="Bold" Height="43" HorizontalAlignment="Left" Margin="233,27,0,0" Name="textBlock3" Text="Year" VerticalAlignment="Top" Width="97" />

Step 2

Now we will write the code for the Add Month Button:
 

int h = Convert.ToInt16(btnMonth.Content.ToString());

if (h < 12)

{

    int x = h + 1;

    if (h < 9)

    {

        btnMonth.Content = "0" + x.ToString();

    }

    else

    {

        btnMonth.Content = x.ToString();

    }

}

Here we use the value of the btnMonth (in my example its 04) and then we will increment it by 1 like this:



Step 3

Now we will write the code for Minus Button like this:
 

private void btnMinusMonth_Click(object sender, RoutedEventArgs e)

{

    int h = Convert.ToInt16(btnMonth.Content.ToString());

    if (h > 1)

    {

         int x = h - 1;

         if (h < 11)

         {

             btnMonth.Content = "0" + x.ToString();

         }

         else

         {

             btnMonth.Content = x.ToString();

         }

    }

}

Here we use the value of the btnMonth (in my example its 04) and then we will decrement it by 1 like this:



Step 4

Like in our previous steps, we will write the same code for our "Day" and "Year" button like this:
 

private void btnAddDay_Click(object sender, RoutedEventArgs e)

{

    int h = Convert.ToInt16(btnDay.Content.ToString());

    if (h < 31)

    {

        int x = h + 1;

        if (h < 9)

        {

            btnDay.Content = "0" + x.ToString();

        }

        else

        {

            btnDay.Content = x.ToString();

        }

    }

}

 

private void btnMinusDay_Click(object sender, RoutedEventArgs e)

{

    int h = Convert.ToInt16(btnDay.Content.ToString());

    if (h > 1)

    {

        int x = h - 1;

        if (h < 11)

        {

            btnDay.Content = "0" + x.ToString();

        }

        else

        {

            btnDay.Content = x.ToString();

        }

    }

}

 

private void btnAddYear_Click(object sender, RoutedEventArgs e)

{

    int h = Convert.ToInt16(btnYear.Content.ToString());

    int x = h + 1;

    btnYear.Content = x.ToString();

}

 

private void btnMinusYear_Click(object sender, RoutedEventArgs e)

{

    int h = Convert.ToInt16(btnYear.Content.ToString());

    int x = h - 1;

    btnYear.Content = x.ToString();

}

Step 5

Now we will write the code for our "Set Date" button. So when we click on it, the TextBox will be visible in which we will show our set Date like this:


 

private void btnSetDate_Click(object sender, RoutedEventArgs e)

{

    txtSetDate.Visibility = Visibility.Visible;

    int a, b,c;

    a = Convert.ToInt16(btnMonth.Content.ToString());

    b = Convert.ToInt16(btnDay.Content.ToString());

    c = Convert.ToInt16(btnYear.Content.ToString());

    txtSetDate.Text = b + "/" + a + "/" + c;          

}