Field Date

Date pickers allow users to select a single or a range of dates and times.

AllowInput

AllowInput allows user to enter the date by typing the date.

When AllowInput is set to true, an alternative format for input is created to allow to quick enter value of an the date or date tim.
For a date the inputQuickFormat is dmY. (Typing '10102021' is the same as typing '10/10/2021')
For a datetime the inputQuickFormat is dmY Hi. (Typing '10102021 1010' is the same as typing '10/10/2021 10:10')

TypeDefault Value
boolfalse
<NVFieldDate 
  Name="AllowInput" 
  Label="AllowInput" 
  AllowInput
/>

CalendarOutsideField

CalendarOutsideField enable the rendering of the picker outside the 'div.field.field-date'.

In some case, when the field is inside a scrolling content for example, the picker will be hided by the scrolling container, to avoid this use CalendarOutsideField.

TypeDefault Value
boolfalse
<NVBlock Overflow="auto" Width="200px" Height="200px">
  <NVBlock Width="200px" Height="200px"></NVBlock>
   <NVFieldDate
    Name="CalendarOutsideField"
    Label="CalendarOutsideField"
    CalendarOutsideField
  />
  <NVFieldDate
    Name="CalendarOutsideField"
    Label="CalendarOutsideField"
  />
  <NVBlock Width="200px" Height="200px"></NVBlock>
</NVBlock>

DateDelimiter

Set the string date separator when the FieldDate is in multiple mode.
TypeDefault Value
string, 
<NVFieldDate 
  Name="DateDelimiter" 
  Label="DateDelimiter" 
  DateDelimiter=" + "
  Multiple
/>

DefaultHour

Set the default value for the hour selector when the Value is empty.
TypeDefault Value
int0
<NVFieldDate 
  Name="DefaultHour" 
  Label="DefaultHour"
  DefaultHour="21"
  EnableTime 
/>

DefaultMinute

Set the default value for the minute selector when the Value is empty.
TypeDefault Value
int0
<NVFieldDate 
  Name="DefaultMinute" 
  Label="DefaultMinute" 
  DefaultMinute="30"
  EnableTime 
/>

EnableTime

Display or hide the time selector of the date picker.
TypeDefault Value
boolfalse
<NVFieldDate 
  Name="EnableTime" 
  Label="EnableTime" 
  EnableTime 
/>

Error

Set the field in State 'error'.

If the Field is used within an EditForm, an EditContext will be cascaded, and the Error and Validation will be manage automatically by the EditContext.

TypeDefault Value
boolfalse
An error occur.
<NVFieldDate 
  Name="Error" 
  Label="Error" 
  Error
  Validation="An error occur."   
/>

HourIncrement

Set the hour increment when incrementing ou decrementing the hour by clicking buttons.
TypeDefault Value
int1
<NVFieldDate 
  Name="HourIncrement" 
  Label="HourIncrement" 
  HourIncrement="2"
  EnableTime 
/>

MaxDate

Set the MaxDate for the date picker.
The MaxDate is inclusive.
MaxDate has the string format : Y-m-d or Y-m-d H:i.

TypeDefault Value
string?null
<NVFieldDate 
  Name="MaxDate" 
  Label="MaxDate" 
  MaxDate="2021-11-22" 
/>

MinDate

Set the MinDate for the date picker.
The MinDate is inclusive.
MinDate has the string format : Y-m-d or Y-m-d H:i.

MinDate is usually used to avoid date selection in the past.

TypeDefault Value
string?null
<NVFieldDate 
  Name="MinDate" 
  Label="MinDate" 
  MinDate="2023-01-20" 
/>

MinuteIncrement

TypeDefault Value
int1
<NVFieldDate 
  Name="MinuteIncrement" 
  Label="MinuteIncrement" 
  MinuteIncrement="2"
  EnableTime 
/>

Multiple

Enable multiple date selection.

TypeDefault Value
boolfalse
<NVFieldDate 
  Name="Multiple" 
  Label="Multiple" 
  Multiple 
/>

NextArrow

Set the 'next arrow' of the date picker.

TypeDefault Value
string<i class="nv-icon nv-icon-arrow-right" />
<NVFieldDate 
  Name="NextArrow" 
  Label="NextArrow" 
  NextArrow=">" 
/>

NVFieldAfter

Add content after the 'input' element.

TypeDefault Value
RenderFragmentnull
After content 
<NVFieldDate 
  Name="NVFieldAfter" 
  Label="NVFieldAfter" 
>
  <NVFieldAfter>After Content</NVFieldAfter>
</NVFieldDate>

NVFieldBefore

Add content before the 'input' element.

TypeDefault Value
RenderFragmentnull
Before content 
<NVFieldDate 
  Name="NVFieldBefore" 
  Label="NVFieldBefore" 
>
  <NVFieldBefore>Before Content</NVFieldBefore>
</NVFieldDate>

NVFieldLabel

NVFieldLabel define the content label of the Checkbox Field.

TypeDefault Value
RenderFragmentnull
<NVFieldDate 
  Name="NVFieldLabel" 
  Label="NVFieldLabel" 
>
  <NVFieldLabel>This is a <strong>label</strong></NVFieldLabel>
</NVFieldDate>

NVFieldMessage

When you need a more complex (with html markups) message, you can use FieldMessage RenderFragment.

TypeDefault Value
RenderFragmentnull
This is a message with markups
<NVFieldDate 
  Name="NVFieldMessage" 
  Label="NVFieldMessage" 
>
  <NVFieldMessage>This is a message with <strong>markups</strong></NVFieldMessage>
</NVFieldDate>

NVFieldValidation

When you need a more complex (with html markups) Validation message, you can use FieldValidation RenderFragment.
It will override the Validation message, coming from Model/EditContext or from Validation Parameter.

TypeDefault Value
RenderFragmentnull
An error occurred.
<NVFieldDate 
  Name="NVFieldValidation" 
  Label="NVFieldValidation" 
  Error
>
  <NVFieldValidation>An error <strong>occurred</strong>.</NVFieldValidation>
</NVFieldDate>

PrevArrow

TypeDefault Value
string<i class="nv-icon nv-icon-arrow-left" />
<NVFieldDate 
  Name="PrevArrow" 
  Label="PrevArrow" 
  PrevArrow="<" 
/>

Range

Enable the range selection.

TypeDefault Value
boolfalse
<NVFieldDate Range
           Placeholder="Please select a date range..."
           Label="Date range"
           Value="@RangeDateTimes"
           ValueChanged="@OnValueChanged"
           TValue="DateTime[]" />

@code {
    [Parameter]
    public DateTime[]? RangeDateTimes { get; set; } = new DateTime[] {};

    private void OnValueChanged(DateTime[] value)
    {
        RangeDateTimes = value ?? null;
    }
}

Readonly

Set the Field input as readonly.

TypeDefault Value
boolfalse
<NVFieldDate Label="Readonly" Nmae="Readonly" Readonly />

Required

Set the Field as required. This adds an * after the label.

TypeDefault Value
boolfalse
<NVFieldDate Label="Required" Name="Required" Required @bind-Value="_model.date" />

ShowMonths

Set the numbers of months displayed by the date picker.

TypeDefault Value
int1
<NVFieldDate 
  Name="ShowMonths" 
  Label="ShowMonths" 
  ShowMonths="@(2)" 
/>

Single

Set the mode of the date picker to single date selection.
Single is the default mode of selection.

TypeDefault Value
booltrue
<NVFieldDate 
  Name="Single" 
  Label="Single" 
  Single 
/>

Success

Set the field in State 'success'.

If the Field is used within an EditForm, an EditContext will be cascaded, and the Error and Validation will be manage automatically by the EditContext.

TypeDefault Value
boolfalse
<NVFieldDate 
  Name="Success" 
  Label="Success" 
  Success   
/>

WeekNumbers

TypeDefault Value
boolfalse
<NVFieldDate 
  Name="WeekNumbers" 
  Label="WeekNumbers" 
  WeekNumbers
/>
On this page