Adding DatePicker Sample in GitHub

App.razor

@@ -0,0 +1,11 @@
+
+<Router AppAssembly="@typeof(Program).Assembly">
+    <Found Context="routeData">
+        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+    </Found>
+    <NotFound>
+        <LayoutView Layout="@typeof(MainLayout)">
+            <p>Sorry, there's nothing at this address.</p>
+        </LayoutView>
+    </NotFound>
+</Router>

Data/WeatherForecast.cs

@@ -0,0 +1,15 @@
+using System;
+
+namespace MyBlazorProject.Data
+{
+    public class WeatherForecast
+    {
+        public DateTime Date { get; set; }
+
+        public int TemperatureC { get; set; }
+
+        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
+
+        public string Summary { get; set; }
+    }
+}

Data/WeatherForecastService.cs

@@ -0,0 +1,25 @@
+using System;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace MyBlazorProject.Data
+{
+    public class WeatherForecastService
+    {
+        private static readonly string[] Summaries = new[]
+        {
+            "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
+        };
+
+        public Task<WeatherForecast[]> GetForecastAsync(DateTime startDate)
+        {
+            var rng = new Random();
+            return Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast
+            {
+                Date = startDate.AddDays(index),
+                TemperatureC = rng.Next(-20, 55),
+                Summary = Summaries[rng.Next(Summaries.Length)]
+            }).ToArray());
+        }
+    }
+}

MyBlazorProject.csproj

@@ -0,0 +1,11 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+  <PropertyGroup>
+    <TargetFramework>netcoreapp3.1</TargetFramework>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Syncfusion.Blazor" Version="18.1.0.44" />
+  </ItemGroup>
+
+</Project>

MyBlazorProject.sln

@@ -0,0 +1,25 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 16
+VisualStudioVersion = 16.0.29424.173
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "MyBlazorProject", "MyBlazorProject.csproj", "{3D217D2E-6175-4E79-ADBA-82A1EAA8196F}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{3D217D2E-6175-4E79-ADBA-82A1EAA8196F}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{3D217D2E-6175-4E79-ADBA-82A1EAA8196F}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{3D217D2E-6175-4E79-ADBA-82A1EAA8196F}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{3D217D2E-6175-4E79-ADBA-82A1EAA8196F}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {C9FA3A93-DE4C-4190-BD3A-091E3A884F28}
+	EndGlobalSection
+EndGlobal

Pages/Counter.razor

@@ -0,0 +1,16 @@
+@page "/counter"
+
+<h1>Counter</h1>
+
+<p>Current count: @currentCount</p>
+
+<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
+
+@code {
+    private int currentCount = 0;
+
+    private void IncrementCount()
+    {
+        currentCount++;
+    }
+}

Pages/Error.razor

@@ -0,0 +1,16 @@
+@page "/error"
+
+
+<h1 class="text-danger">Error.</h1>
+<h2 class="text-danger">An error occurred while processing your request.</h2>
+
+<h3>Development Mode</h3>
+<p>
+    Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
+</p>
+<p>
+    <strong>The Development environment shouldn't be enabled for deployed applications.</strong>
+    It can result in displaying sensitive information from exceptions to end users.
+    For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
+    and restarting the app.
+</p>

Pages/FetchData.razor

@@ -0,0 +1,59 @@
+@page "/fetchdata"
+
+@using MyBlazorProject.Data
+@inject WeatherForecastService ForecastService
+
+<h1>Weather forecast</h1>
+
+<p>This component demonstrates fetching data from a service.</p>
+
+@if (forecasts == null)
+{
+    <p><em>Loading...</em></p>
+}
+else
+{
+    <table class="table">
+        <thead>
+            <tr>
+                <th>Date</th>
+                <th>Temp. (C)</th>
+                <th>Temp. (F)</th>
+                <th>Summary</th>
+            </tr>
+        </thead>
+        <tbody>
+            @foreach (var forecast in forecasts)
+            {
+                <tr>
+                    <td>@forecast.Date.ToShortDateString()</td>
+                    <td>@forecast.TemperatureC</td>
+                    <td>@forecast.TemperatureF</td>
+                    <td>@forecast.Summary</td>
+                </tr>
+            }
+        </tbody>
+    </table>
+}
+
+@code {
+    private WeatherForecast[] forecasts;
+
+    protected override async Task OnInitializedAsync()
+    {
+        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
+    }
+
+    @*Add the below snippets inside above tag to apply format, Month picker and watermark
+        Format="MM yyyy"
+        Start="@CalendarView.Year"
+        Depth="@CalendarView.Year"
+        Placeholder="Choose a Date"
+
+                      Value="@DateValue"
+        @code{
+        public DateTime DateValue { get; set; } = new DateTime(2020, 03, 20);
+
+    }
+                     *@
+}

Pages/Index.razor

@@ -0,0 +1,27 @@
+@page "/"
+
+    <div id="wrapper">
+        @*Add Placeholder="Choose a Date" when Value property is not set*@
+        @*Add these properties to design Month picker Format="MM yyyy"
+        Start="@CalendarView.Year"
+        Depth="@CalendarView.Year"*@
+        <SfDatePicker TValue="DateTime?"
+                      Value="DateValue"
+                      Min="StartValue"
+                      Max="EndValue"></SfDatePicker>
+    </div>
+
+@code{
+    public DateTime DateValue { get; set; } = new DateTime(2020, 03, 20);
+    public DateTime StartValue { get; set; } = new DateTime(2020, 03, 10);
+    public DateTime EndValue { get; set; } = new DateTime(2020, 03, 22);
+}
+
+<style>
+    #wrapper{
+        max-width: 245px;
+        margin: 0px auto;
+        padding-top: 20px;
+    }
+</style>
+

Pages/_Host.cshtml

@@ -0,0 +1,37 @@
+@page "/"
+@namespace MyBlazorProject.Pages
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+@{
+    Layout = null;
+}
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>MyBlazorProject</title>
+    <base href="~/" />
+    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
+    <link href="css/site.css" rel="stylesheet" />
+    <link href="_content/Syncfusion.Blazor/styles/material.css" rel="stylesheet" />
+</head>
+<body>
+    <app>
+        <component type="typeof(App)" render-mode="ServerPrerendered" />
+    </app>
+
+    <div id="blazor-error-ui">
+        <environment include="Staging,Production">
+            An error has occurred. This application may no longer respond until reloaded.
+        </environment>
+        <environment include="Development">
+            An unhandled exception has occurred. See browser dev tools for details.
+        </environment>
+        <a href="" class="reload">Reload</a>
+        <a class="dismiss">🗙</a>
+    </div>
+
+    <script src="_framework/blazor.server.js"></script>
+</body>
+</html>

Program.cs

@@ -0,0 +1,28 @@
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore;
+using Microsoft.AspNetCore.Hosting;
+using Microsoft.Extensions.Configuration;
+using Microsoft.Extensions.Hosting;
+using Microsoft.Extensions.Logging;
+
+namespace MyBlazorProject
+{
+    public class Program
+    {
+        public static void Main(string[] args)
+        {
+            CreateHostBuilder(args).Build().Run();
+        }
+
+        public static IHostBuilder CreateHostBuilder(string[] args) =>
+            Host.CreateDefaultBuilder(args)
+                .ConfigureWebHostDefaults(webBuilder =>
+                {
+                    webBuilder.UseStartup<Startup>();
+                });
+    }
+}

Properties/launchSettings.json

@@ -0,0 +1,27 @@
+{
+  "iisSettings": {
+    "windowsAuthentication": false,
+    "anonymousAuthentication": true,
+    "iisExpress": {
+      "applicationUrl": "http://localhost:49900",
+      "sslPort": 44327
+    }
+  },
+  "profiles": {
+    "IIS Express": {
+      "commandName": "IISExpress",
+      "launchBrowser": true,
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "MyBlazorProject": {
+      "commandName": "Project",
+      "launchBrowser": true,
+      "applicationUrl": "https://localhost:5001;http://localhost:5000",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    }
+  }
+}

README.md

@@ -1,2 +1,15 @@
-# create-blazor-date-picker-component-in-blazor-server-app
+# Create Blazor DatePicker Component in Blazor Server App
+
 A quick start blazor server app that allows you to configure the Blazor DatePicker component from Syncfusion with its available options. This project contains simple code customizations, as well as some important features such as setting specific date values, formats and navigating between different views such as month, year, and decade.
+
+Documentation: https://blazor.syncfusion.com/documentation/datepicker/getting-started/
+
+Online examples: https://blazor.syncfusion.com/demos/datepicker/default-functionalities
+
+## Project prerequisites
+
+Make sure that you have the compatible versions of Visual Studio 2019 and .NET Core SDK 3.1.2 in your machine before starting to work on this project.
+
+## How to run this application?
+
+To run this application, you need to first clone the `create-blazor-date-picker-component-in-blazor-server-app` repository and then open it in Visual Studio 2019. Now, simply build and run your project to view the output.

Shared/MainLayout.razor

@@ -0,0 +1,15 @@
+@inherits LayoutComponentBase
+
+<div class="sidebar">
+    <NavMenu />
+</div>
+
+<div class="main">
+    <div class="top-row px-4">
+        <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
+    </div>
+
+    <div class="content px-4">
+        @Body
+    </div>
+</div>

Shared/NavMenu.razor

@@ -0,0 +1,37 @@
+<div class="top-row pl-4 navbar navbar-dark">
+    <a class="navbar-brand" href="">MyBlazorProject</a>
+    <button class="navbar-toggler" @onclick="ToggleNavMenu">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+</div>
+
+<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
+    <ul class="nav flex-column">
+        <li class="nav-item px-3">
+            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
+                <span class="oi oi-home" aria-hidden="true"></span> Home
+            </NavLink>
+        </li>
+        <li class="nav-item px-3">
+            <NavLink class="nav-link" href="counter">
+                <span class="oi oi-plus" aria-hidden="true"></span> Counter
+            </NavLink>
+        </li>
+        <li class="nav-item px-3">
+            <NavLink class="nav-link" href="fetchdata">
+                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
+            </NavLink>
+        </li>
+    </ul>
+</div>
+
+@code {
+    private bool collapseNavMenu = true;
+
+    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
+
+    private void ToggleNavMenu()
+    {
+        collapseNavMenu = !collapseNavMenu;
+    }
+}

Shared/SurveyPrompt.razor

@@ -0,0 +1,16 @@
+<div class="alert alert-secondary mt-4" role="alert">
+    <span class="oi oi-pencil mr-2" aria-hidden="true"></span>
+    <strong>@Title</strong>
+
+    <span class="text-nowrap">
+        Please take our
+        <a target="_blank" class="font-weight-bold" href="https://go.microsoft.com/fwlink/?linkid=2112271">brief survey</a>
+    </span>
+    and tell us what you think.
+</div>
+
+@code {
+    // Demonstrates how a parent component can supply parameters
+    [Parameter]
+    public string Title { get; set; }
+}