Add support for other date/time fields

[rynowak]

We have good support in the box for doing binding correctly to <input type="date" /> fields using @bind and <InputDate>. We haven't added support for the other HTML5 date/time quantities like month.

Right now users can work around this by manually specifying the format:

<input type="datetimelocal" @bind="someDateTimeOffset" @bind:format="yyyy-MM-ddThh:mm" />

What's missing for us to have good in the box support would be to:

• add attributes mapping the field types to formats
• add support to <InputDate> to switch on type (right now type="date" is hardcoded)
• add tests for both of these

---

We're not doing this right now because we haven't gotten many requests for it, and users can easily work around the missing support by specifying the format. If we do add support it won't be a breaking change to anyone using the workaround because a user-specified format always wins over a framework-provided default.

[EdCharbeneau]

@pranavkm I wanted to clear up the specs before working on this item.

These functionalities are to be added to the InputDate component only, or is there another area of the codebase that will need support first?
Is there any guidance on how the InputDate type property should be handled [string, enum]?

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/month
Month will need to default to the first day of the month to properly map to a DateTime.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time
Time will need to include a bogus date and map to DateTime or map to a TimeSpan.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/week
Week does not represent a DateTime value, but a week number or possibly a TimeSpan.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local
datetime: The type "datetime" is obsolete
datetime-local: The type "datetime-local" might be hit/miss. See the note from Mozilla below:

Because of the limited browser support for datetime-local, and the variations in how the inputs work, it may currently still be best to use a framework or library to present these, or to use a custom input of your own. Another option is to use separate date and time inputs, each of which is more widely supported than datetime-local.

[pranavkm]

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/month
Month will need to default to the first day of the month to properly map to a DateTime.

👍

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time
Time will need to include a bogus date and map to DateTime or map to a TimeSpan.

We can use the current date as the date + time.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/week
Week does not represent a DateTime value, but a week number or possibly a TimeSpan.

👍

[EdCharbeneau]

@pranavkm I added some functionality to the InputDate component for Month and Time scenarios in addition to Date.

You can control the type attribute via DateInputType enum which will display the corresponding UI and map the appropriate values to a DateTime.

Usage:

<EditForm Model="myform" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <label>Date Input</label>
    <InputDate @bind-Value="@myform.MyDate"></InputDateTime>
    <label>Month Input</label>
    <InputDate DateInputType="DateInputType.Month" @bind-Value="@myform.MyMonth"></InputDateTime>
    <label>Time Input</label>
    <InputDate DateInputType="DateInputType.Time" @bind-Value="@myform.MyTime"></InputDateTime>
    <button type="submit">Submit</button>
</EditForm>

Can you please review the component and see if the approach is valid? If we're on the right track I'll work on getting the proper tests going and submit a PR.

https://github.com/EdCharbeneau/aspnetcore/blob/feature-blazor-InputDate/src/Components/Web/src/Forms/InputDate.cs

Testing
I was unable to get the Selenium tests to run. I'm working through some installation issues with JAVA.

[pranavkm]

Yup, this looks great.

I was unable to get the Selenium tests to run. I'm working through some installation issues with JAVA.

@captainsafia another data point in case you were collecting these.

[captainsafia]

@EdCharbeneau Can you share a stack trace of the error if there was any?

[EdCharbeneau]

1. error I get from the CLI.

FAIL tests/DefaultReconnectionHandler.test.ts
    ΓùÅ Test suite failed to run

      TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
      src/Platform/Profiling.ts:127:44 - error TS2304: Cannot find name 'BINDING'.

      127     return typeof str === 'string' ? str : BINDING.conv_string(str);
                                                     ~~~~~~~

2. I have a JAVA error when trying to run tests from Visual Studio. I'm re-intalling the JAVA SDK now to see if this fixes the problem.

Question: How do I run individual tests using ./build.cmd -test

[captainsafia]

For the first error, take a look at the fix introduced in #24026.

For running individual tests, you can try activating the preview version of dotnet using the activiation script (source activate.sh or . ./activate.ps1 depending on your environment). Then on the command line, you can cd into the test project and run dotnet test.

If you are using VS, you can use the test runner in VS to run individual test classes.

[EdCharbeneau]

Running from within VS I get:

53>C:\Users\edcha\source\aspnet\src\Shared\E2ETesting\E2ETesting.targets(43,5): error MSB3073: The command "java -version" exited with code 9009.
53>Done building project "Microsoft.AspNetCore.Components.E2ETests.csproj" -- FAILED.

Which points to this broken link:

    <!-- JAVA -->
    <!-- https://github.com/dotnet/aspnetcore-internal/issues/2555 -->
    <Message Importance="High" Text="Ensuring JAVA is available" />
    <Exec Command="java -version" />
    <Message Importance="High" Text="JAVA is available on the PATH" />

Update: I fixed the error by adding the JAVA path as follows. https://javatutorial.net/set-java-home-windows-10

[EdCharbeneau]

@captainsafia Selenium doesn't seem to work when running tests within VS. I haven't tried from the CLI.

  Source: AuthTest.cs line 71
   Duration: 4.4 sec

  Message: 
    OpenQA.Selenium.BrowserAssertFailedException : Xunit.Sdk.NotEmptyException: Assert.NotEmpty() Failure
       at Xunit.Assert.NotEmpty(IEnumerable collection) in C:\Dev\xunit\xunit\src\xunit.assert\Asserts\CollectionAsserts.cs:line 331
       at Microsoft.AspNetCore.E2ETesting.WaitAssert.<>c__DisplayClass15_0.<Exists>b__0() in C:\Users\edcha\source\aspnet\src\Shared\E2ETesting\WaitAssert.cs:line 67
       at Microsoft.AspNetCore.E2ETesting.WaitAssert.<>c__DisplayClass18_0`1.<WaitAssertCore>b__0(IWebDriver _) in C:\Users\edcha\source\aspnet\src\Shared\E2ETesting\WaitAssert.cs:line 98
    Screen shot captured at 'C:\Users\edcha\source\aspnet\src\Components\test\E2ETest\bin\screenshots\39bc71310d9748b08a77dfdfb580a793.png'
    Encountered browser errors
    [2020-07-21T17:49:38Z] [Severe] http://127.0.0.1:62922/subdir - Failed to load resource: the server responded with a status of 404 (Not Found)Page content:
    <head></head><body></body>
    
    ---- Assert.NotEmpty() Failure
  Stack Trace: 
    WaitAssert.WaitAssertCore[TResult](IWebDriver driver, Func`1 assertion, TimeSpan timeout) line 126
    WaitAssert.Exists(IWebDriver driver, By finder, TimeSpan timeout) line 64
    WaitAssert.Exists(IWebDriver driver, By finder) line 51
    BasicTestAppWebDriverExtensions.WaitUntilTestSelectorReady(IWebDriver browser) line 21
    BasicTestAppWebDriverExtensions.MountTestComponent[TComponent](IWebDriver browser) line 12
    AuthTest.MountAndNavigateToAuthTest(String authLinkText) line 232
    AuthTest.CascadingAuthenticationState_Authenticated() line 75
    ----- Inner Stack Trace -----
    <>c__DisplayClass15_0.<Exists>b__0() line 67
    <>c__DisplayClass18_0`1.<WaitAssertCore>b__0(IWebDriver _) line 98

[captainsafia]

@EdCharbeneau Do you see this test failure on all tests? Typically, this failure will occur due to loading delays in Selenium. In this case, whatever button or element we are looking for in the UI hasn't waited yet.