Skip to content

Commit

Permalink
Started on #10
Browse files Browse the repository at this point in the history
  • Loading branch information
nheath99 committed Oct 2, 2018
1 parent b92e270 commit f9b2c69
Show file tree
Hide file tree
Showing 9 changed files with 200 additions and 23 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,13 @@
<ProjectReference Include="..\BlazorNodaTimeDateTimePicker\BlazorNodaTimeDateTimePicker.csproj" />
</ItemGroup>

<ItemGroup>
<Content Update="Pages\date-range-picker.cshtml">
<Pack>$(IncludeRazorContentInPack)</Pack>
</Content>
<Content Update="Pages\date-time-picker.cshtml">
<Pack>$(IncludeRazorContentInPack)</Pack>
</Content>
</ItemGroup>

</Project>
67 changes: 59 additions & 8 deletions src/BlazorNodaTimeDateTimePicker.Demo/Pages/Index.cshtml
Original file line number Diff line number Diff line change
@@ -1,31 +1,82 @@
@page "/"
@using NodaTime;

<h1>Hello, world!</h1>
<h3>Blazor NodaTime Date Picker</h3>

Welcome to your new app.
<hr />
<h3>Inline</h3>

<div style="width: 250px;">
<DatePicker Inline=true Changed=changed1 MinDate=MinDate />
<DatePicker Inline=true Changed=changed1 />
</div>

<p>
The selected date is: @selectedDate1
</p>
<pre>
<code class="html">
@string1
</code>
</pre>
<hr />
<h3>Bound to Input</h3>

<input type="text" onfocus="@focussed" />
<input type="text" onfocus="@focussed" value=@selectedDate2 />
<DatePicker Visible="datePicker2Visible" Selected="selected2" Width="250px" FormatProvider=FormatProvider DisplayDaysOfWeek=false />

<p>This is the text below.</p>
<p>
@selectedDate2
</p>

<hr />
<h3>First Day of Week</h3>

<hr />
<h3>Display Days of Week</h3>

<hr />
<h3>Localisation</h3>

<hr />
<h3>Selected Date</h3>

<hr />
<h3>Min. Date</h3>

<hr />
<h3>Max. Date</h3>

<hr />
<h3>Disabled Dates</h3>

<hr />
<h3>Enabled Dates</h3>

<hr />
<h3>Days of Week Disabled</h3>

<hr />
<h3>Disabled Date Intervals</h3>

<hr />
<h3>Day View Header Format</h3>

<hr />
<h3>Month View Header Format</h3>

<hr />
<h3>Show Today</h3>

<hr />
<h3>Show Clear</h3>

<hr />
<h3>Events</h3>

@functions {
System.Globalization.CultureInfo FormatProvider = new System.Globalization.CultureInfo("fr-FR");

LocalDate MinDate = new LocalDate(2018, 9, 29);

string string1 = "<DatePicker Inline=true />";

LocalDate? selectedDate1;
void changed1(LocalDate? localDate)
{
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
@page "/date-range-picker"
@using NodaTime;

<h1>Blazor NodaTime Date Range Picker</h1>
<p>
Todo
</p>
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
@page "/date-time-picker"
@using NodaTime;

<h1>Blazor NodaTime Date Time Picker</h1>
<p>
Todo
</p>
10 changes: 5 additions & 5 deletions src/BlazorNodaTimeDateTimePicker.Demo/Shared/NavMenu.cshtml
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,17 @@
<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
<span class="oi oi-home" aria-hidden="true"></span> Date Picker
</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 class="nav-link" href="date-time-picker">
<span class="oi oi-plus" aria-hidden="true"></span> Date/Time Picker
</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 class="nav-link" href="date-range-picker">
<span class="oi oi-list-rich" aria-hidden="true"></span> Date Range Picker
</NavLink>
</li>
</ul>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
/*
Original highlight.js style (c) Ivan Sagalaev <[email protected]>
*/

.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #F0F0F0;
}


/* Base color: saturation 0; */

.hljs,
.hljs-subst {
color: #444;
}

.hljs-comment {
color: #888888;
}

.hljs-keyword,
.hljs-attribute,
.hljs-selector-tag,
.hljs-meta-keyword,
.hljs-doctag,
.hljs-name {
font-weight: bold;
}


/* User color: hue: 0 */

.hljs-type,
.hljs-string,
.hljs-number,
.hljs-selector-id,
.hljs-selector-class,
.hljs-quote,
.hljs-template-tag,
.hljs-deletion {
color: #880000;
}

.hljs-title,
.hljs-section {
color: #880000;
font-weight: bold;
}

.hljs-regexp,
.hljs-symbol,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #BC6060;
}


/* Language color: hue: 90; */

.hljs-literal {
color: #78A960;
}

.hljs-built_in,
.hljs-bullet,
.hljs-code,
.hljs-addition {
color: #397300;
}


/* Meta color: hue: 200 */

.hljs-meta {
color: #1f7199;
}

.hljs-meta-string {
color: #4d99bf;
}


/* Misc effects */

.hljs-emphasis {
font-style: italic;
}

.hljs-strong {
font-weight: bold;
}
2 changes: 1 addition & 1 deletion src/BlazorNodaTimeDateTimePicker.Demo/wwwroot/css/site.css
Original file line number Diff line number Diff line change
Expand Up @@ -120,4 +120,4 @@ app {
/* Never collapse the sidebar for wide screens */
display: block;
}
}
}
20 changes: 11 additions & 9 deletions src/BlazorNodaTimeDateTimePicker.Demo/wwwroot/index.html
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<title>BlazorNodaTimeDateTimePicker</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<title>BlazorNodaTimeDateTimePicker</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />
<link href="css/highlight/default.css" rel="stylesheet" />
</head>
<body>
<app>Loading...</app>
<app>Loading...</app>

<script src="_framework/blazor.webassembly.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
<script src="js/highlight/highlight.pack.js"></script>
</body>
</html>

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit f9b2c69

Please sign in to comment.