question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

DatePicker: week count, date&time picker focus, quarter range & placeholder

See original GitHub issue

Describe the bug

I found several bugs in date/range picker. ~1. Week picker - week count for beginning of the year is showing incorrectly. For example first week in 2020 is actually starting from the second~ image ~and it should show like this:~ image Solved by #1452

  1. Date & Time picker - time is not focused and when changing time using keyboard, it does not focus either: image

  2. Date & Time range picker - after selecting the date and clicking Ok button, the focus should move to the second date. Instead, the picker is closed and focus is taken off the input: dateTimePickerRange_2ndPickerFocus Expected behaviour: dateTimePickerRange_2ndPickerFocus_Expected

  3. Quarter range: When I set the end quarter, the same quarter of the start quarter is disabled, it should be enabled. image

  4. Placeholder issue.

  • the attribute Placeholder has no effect unless it is placed after PickerType
  • if it is visible, it is only visible after initialization of the component. If the value is set and the cleared, default placeholder is shown datePickerRange_vanishingPlaceholder

Steps to reproduce (please include code)

Except for the 5th point, all the other are reproduceable using the docs. To reproduce the 5th, use this code (last 2 pickers will have a custom placeholder and it will vanish if cleared):

<DatePicker TValue="DateTime?" Placeholder="@("Will vanish on clear")" AllowClear Picker="@DatePickerType.Date" />
<DatePicker TValue="DateTime?" AllowClear Placeholder="@("Will vanish on clear")" />
<br/><br/>
<DatePicker TValue="DateTime?" Picker="@DatePickerType.Date" Placeholder="@("Will vanish on clear")" AllowClear/>
<DatePicker TValue="DateTime?" Picker="@DatePickerType.Date" AllowClear Placeholder="@("Will vanish on clear")"/>

Further technical details

  • AntDesign Nuget Package version: 0.8

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:7 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
Alexbitscommented, Jul 8, 2022
  1. Quarter range: When I set the end quarter, the same quarter of the start quarter is disabled, it should be enabled. image
  2. Placeholder issue.
  • the attribute Placeholder has no effect unless it is placed after PickerType
  • if it is visible, it is only visible after initialization of the component. If the value is set and the cleared, default placeholder is shown datePickerRange_vanishingPlaceholder

Steps to reproduce (please include code)

Except for the 5th point, all the other are reproduceable using the docs. To reproduce the 5th, use this code (last 2 pickers will have a custom placeholder and it will vanish if cleared):

<DatePicker TValue="DateTime?" Placeholder="@("Will vanish on clear")" AllowClear Picker="@DatePickerType.Date" />
<DatePicker TValue="DateTime?" AllowClear Placeholder="@("Will vanish on clear")" />
<br/><br/>
<DatePicker TValue="DateTime?" Picker="@DatePickerType.Date" Placeholder="@("Will vanish on clear")" AllowClear/>
<DatePicker TValue="DateTime?" Picker="@DatePickerType.Date" AllowClear Placeholder="@("Will vanish on clear")"/>

Further technical details

  • AntDesign Nuget Package version: 0.8

@ElderJames These two issues are still present. I will look into this.

  1. Placeholder issue fixed in #2551
1reaction
ElderJamescommented, Jul 3, 2022

Hi @Alexbits , this issue also addresses some issues around datepicker. I think some of them have already been solved. Could you please take a look at it when you’re free?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Date Picker
DateTime Type Props​​ Operations supported for the datetime type date picker. Default time of the selected date. It's format is HH:mm:ss .
Read more >
React custom datepicker: Step-by-step
datepicker : Renders a date input and presents the calendar for the user to select the date. We'll store each component in its...
Read more >
DatePicker
Inline date, multiple dates and dates range picker.
Read more >
Getting started with react-datepicker
This guide will walk through react-datepicker basics with a focus on building ... Open a calendar view when the datepicker is clicked ...
Read more >
Date Picker
A date picker is used to display and, optionally, allow the end-user to edit the value of an attribute of data type Date...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found