Skip to content

[#71351] Teach Single/Range Date Picker support for placeholder text#21911

Merged
myabc merged 3 commits intodevfrom
bug/71351-single-date-picker-placeholder-text
Feb 9, 2026
Merged

[#71351] Teach Single/Range Date Picker support for placeholder text#21911
myabc merged 3 commits intodevfrom
bug/71351-single-date-picker-placeholder-text

Conversation

@myabc
Copy link
Contributor

@myabc myabc commented Feb 8, 2026

Important

This PR is based off #21723. Please review/merge that PR first.

Ticket

https://community.openproject.org/work_packages/71351

What are you trying to accomplish?

  • Updates Angular OpBasicSingleDatePickerComponent and OpBasicRangeDatePickerComponents to support passing a placeholder value.
  • Updates Primer Form inputs to pass placeholder as a date attribute.
  • Additionally, this PR makes SingleDatePickerInput's datepicker_options param optional.

Screenshots

Before After
Screenshot 2026-02-08 at 16 30 59 Screenshot 2026-02-08 at 16 30 18

Merge checklist

  • Added/updated tests
  • Added/updated documentation in Lookbook (patterns, previews, etc)
  • Tested major browsers (Chrome, Firefox, Edge, ...)

@myabc myabc changed the title [#71351] Teach Date Picker placeholder text support [#71351] Teach Single Date Picker support for placeholder text Feb 8, 2026
@myabc myabc added the javascript Pull requests that update Javascript code label Feb 8, 2026
@myabc myabc force-pushed the bug/71351-single-date-picker-placeholder-text branch from aad9813 to 08a1dbc Compare February 8, 2026 19:18
@myabc myabc marked this pull request as ready for review February 8, 2026 19:18
Copilot AI review requested due to automatic review settings February 8, 2026 19:18
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds placeholder support to the Primer form DatePicker components by plumbing the placeholder value from the Ruby form DSL through the Rails-rendered Angular component tag into the Angular datepicker inputs.

Changes:

  • Make datepicker_options optional for SingleDatePickerInput (and by inheritance RangeDatePickerInput), simplifying call sites and specs.
  • Pass placeholder through DatePicker’s Rails template into Angular component inputs.
  • Add Angular @Input() placeholder bindings and new specs validating data-placeholder output for single and range date pickers.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
spec/lib/primer/open_project/forms/dsl/input_methods_spec.rb Updates DSL specs to reflect datepicker_options now being optional.
spec/lib/primer/open_project/forms/date_picker_spec.rb Adds coverage asserting placeholder is emitted as data-placeholder for both date picker variants.
modules/backlogs/app/forms/backlogs/backlog_header_form.rb Removes redundant datepicker_options: {} now that the default exists.
lib/primer/open_project/forms/dsl/single_date_picker_input.rb Makes datepicker_options default to {} to support optional usage.
lib/primer/open_project/forms/date_picker.html.erb Wires placeholder into Angular component inputs (currently always emitted).
frontend/src/app/shared/components/datepicker/basic-single-date-picker/basic-single-date-picker.component.ts Adds @Input() placeholder.
frontend/src/app/shared/components/datepicker/basic-single-date-picker/basic-single-date-picker.component.html Binds placeholder to the rendered <input> elements.
frontend/src/app/shared/components/datepicker/basic-range-date-picker/basic-range-date-picker.component.ts Adds @Input() placeholder.
frontend/src/app/shared/components/datepicker/basic-range-date-picker/basic-range-date-picker.component.html Binds placeholder to the rendered <input> elements.

myabc and others added 3 commits February 8, 2026 16:25
Add `placeholder` `@Input` to both `OpBasicSingleDatePickerComponent`
and `OpBasicRangeDatePickerComponent`, and pass it through from the
server-rendered ERB template via `angular_component_tag`.

For the range picker on mobile, the same placeholder is used for
both start and end date fields.

Default `placeholder` to an empty string when not provided, to
avoid `angular_component_tag` serializing `nil` as `"null"`.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Default `datepicker_options` to `{}` in `SingleDatePickerInput`
(inherited by `RangeDatePickerInput`), and remove now-redundant
empty hash arguments from callsites.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@myabc myabc force-pushed the bug/71351-single-date-picker-placeholder-text branch from 08a1dbc to ab76984 Compare February 8, 2026 19:29
@myabc myabc changed the title [#71351] Teach Single Date Picker support for placeholder text [#71351] Teach Single/Range Date Picker support for placeholder text Feb 8, 2026
@myabc myabc added needs review ruby Pull requests that update Ruby code labels Feb 8, 2026
@myabc myabc added this to the 17.2.x milestone Feb 8, 2026
Base automatically changed from feature/57688-primerize-backlogs-classic to dev February 9, 2026 15:23
@myabc myabc merged commit e1cf4e7 into dev Feb 9, 2026
16 checks passed
@myabc myabc deleted the bug/71351-single-date-picker-placeholder-text branch February 9, 2026 15:25
@github-actions github-actions bot locked and limited conversation to collaborators Feb 9, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

javascript Pull requests that update Javascript code needs review ruby Pull requests that update Ruby code

Development

Successfully merging this pull request may close these issues.

2 participants