Skip to content

Commit

Permalink
More #10
Browse files Browse the repository at this point in the history
  • Loading branch information
nheath99 committed Oct 5, 2018
1 parent 21bc7ed commit c81b085
Show file tree
Hide file tree
Showing 88 changed files with 6,405 additions and 128 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
</ItemGroup>

<ItemGroup>
<PackageReference Include="BlazorStrap" Version="0.6.0" />
<PackageReference Include="Microsoft.AspNetCore.Blazor.Browser" Version="0.6.0" />
<PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="0.6.0" />
</ItemGroup>
Expand Down
116 changes: 88 additions & 28 deletions src/BlazorNodaTimeDateTimePicker.Demo/Pages/Index.cshtml
Original file line number Diff line number Diff line change
Expand Up @@ -6,30 +6,83 @@
<hr />
<h3>Inline</h3>

<div style="width: 250px;">
<DatePicker Inline=true Changed=changed1 />
<div class="d-flex flex-sm-row flex-column">
<div class="mr-3">
<DatePicker Inline=true Changed=@changed1/>
</div>
<div>
Selected Date: <span>@selectedDate1</span>
</div>
</div>

<pre>
<code class="html">
@string1
@demo1String
</code>
</pre>
<hr />
<h3>Bound to Input</h3>

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

<p>
@selectedDate2
Focus on the Input element to display the DatePicker.<br />
Select a Date to close the DatePicker.
</p>

<input type="text" onfocus="@focussed2" value=@selectedDate2 class="form-control mb-2" />
<DatePicker Visible="datePicker2Visible" Selected="selected2" />

<pre>
<code class="html">
@demo2String
</code>
</pre>

<hr />
<h3>First Day of Week</h3>
<p>Specify the first day of the week. Default is Monday.</p>
<div class="d-flex flex-sm-row flex-column">
<div class="mr-3">
<DatePicker Inline=true Changed=@changed3 FirstDayOfWeek=@firstDOW3 />
</div>
<div>
<p>
Selected Date: <span>@selectedDate3</span><br />
First Day of Week:
<select bind=@firstDOW3>
<option value="@IsoDayOfWeek.Monday">Monday</option>
<option value="@IsoDayOfWeek.Tuesday">Tuesday</option>
<option value="@IsoDayOfWeek.Wednesday">Wednesday</option>
<option value="@IsoDayOfWeek.Thursday">Thursday</option>
<option value="@IsoDayOfWeek.Friday">Friday</option>
<option value="@IsoDayOfWeek.Saturday">Saturday</option>
<option value="@IsoDayOfWeek.Sunday">Sunday</option>
</select>
</p>
</div>
</div>

<hr />
<h3>Display Days of Week</h3>
<p>
Hide the Day of Week row.
</p>

<div class="d-flex flex-sm-row flex-column">
<div class="mr-3">
<DatePicker Inline=true DisplayDaysOfWeek=@displayDOW4 />
</div>
<div>
<p>
Display Days of Week:
<select bind=@displayDOW4>
<option value=@false>False</option>
<option value=@true>True</option>
</select>
<span class="text-danger">&lt;- doesn't bind properly</span>
</p>
</div>
</div>

<hr />
<h3>Localisation</h3>
Expand Down Expand Up @@ -73,35 +126,17 @@
@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)
{
selectedDate1 = localDate;

StateHasChanged();
}

void selected1(LocalDate localDate)
{
selectedDate1 = localDate;

StateHasChanged();
}

void cleared1()
{
selectedDate1 = null;
StateHasChanged();
}

LocalDate? selectedDate2;
string demo1String = "<DatePicker Inline=true />";

bool datePicker2Visible = false;
void focussed(UIFocusEventArgs e)
LocalDate? selectedDate2;
void focussed2(UIFocusEventArgs e)
{
datePicker2Visible = true;
}
Expand All @@ -110,7 +145,32 @@
{
selectedDate2 = localDate;
datePicker2Visible = false;
StateHasChanged();
}

string demo2String = @"<input type=""text"" onfocus=""@focussed"" />
<DatePicker Visible=""datePicker2Visible"" Selected=""selected2"" />
@functions {
bool datePicker2Visible = false;
void focussed2(UIFocusEventArgs e)
{
datePicker2Visible = true;
}
void selected2(LocalDate localDate)
{
datePicker2Visible = false;
StateHasChanged();
}
}";

LocalDate? selectedDate3;
void changed3(LocalDate? localDate)
{
selectedDate3 = localDate;
StateHasChanged();
}
IsoDayOfWeek firstDOW3 = IsoDayOfWeek.Tuesday;

bool displayDOW4 = false;
}
3 changes: 1 addition & 2 deletions src/BlazorNodaTimeDateTimePicker.Demo/_ViewImports.cshtml
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,4 @@
@using Microsoft.JSInterop
@using BlazorNodaTimeDateTimePicker.Demo
@using BlazorNodaTimeDateTimePicker.Demo.Shared
@addTagHelper *, BlazorNodaTimeDateTimePicker
@addTagHelper *, BlazorStrap
@addTagHelper *, BlazorNodaTimeDateTimePicker
108 changes: 108 additions & 0 deletions src/BlazorNodaTimeDateTimePicker.Demo/wwwroot/css/highlight/agate.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
/*!
* Agate by Taufik Nurrohman <https://github.com/tovic>
* ----------------------------------------------------
*
* #ade5fc
* #a2fca2
* #c6b4f0
* #d36363
* #fcc28c
* #fc9b9b
* #ffa
* #fff
* #333
* #62c8f3
* #888
*
*/

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

.hljs-name,
.hljs-strong {
font-weight: bold;
}

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

.hljs-tag {
color: #62c8f3;
}

.hljs-variable,
.hljs-template-variable,
.hljs-selector-id,
.hljs-selector-class {
color: #ade5fc;
}

.hljs-string,
.hljs-bullet {
color: #a2fca2;
}

.hljs-type,
.hljs-title,
.hljs-section,
.hljs-attribute,
.hljs-quote,
.hljs-built_in,
.hljs-builtin-name {
color: #ffa;
}

.hljs-number,
.hljs-symbol,
.hljs-bullet {
color: #d36363;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal {
color: #fcc28c;
}

.hljs-comment,
.hljs-deletion,
.hljs-code {
color: #888;
}

.hljs-regexp,
.hljs-link {
color: #c6b4f0;
}

.hljs-meta {
color: #fc9b9b;
}

.hljs-deletion {
background-color: #fc9b9b;
color: #333;
}

.hljs-addition {
background-color: #a2fca2;
color: #333;
}

.hljs a {
color: inherit;
}

.hljs a:focus,
.hljs a:hover {
color: inherit;
text-decoration: underline;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
/*
Date: 24 Fev 2015
Author: Pedro Oliveira <kanytu@gmail . com>
*/

.hljs {
color: #a9b7c6;
background: #282b2e;
display: block;
overflow-x: auto;
padding: 0.5em;
}

.hljs-number,
.hljs-literal,
.hljs-symbol,
.hljs-bullet {
color: #6897BB;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-deletion {
color: #cc7832;
}

.hljs-variable,
.hljs-template-variable,
.hljs-link {
color: #629755;
}

.hljs-comment,
.hljs-quote {
color: #808080;
}

.hljs-meta {
color: #bbb529;
}

.hljs-string,
.hljs-attribute,
.hljs-addition {
color: #6A8759;
}

.hljs-section,
.hljs-title,
.hljs-type {
color: #ffc66d;
}

.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
color: #e8bf6a;
}

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

.hljs-strong {
font-weight: bold;
}
Loading

0 comments on commit c81b085

Please sign in to comment.