feat(datepicker): add period-time mode with start/end time selection in 24h format

[Copilot]

• Understand all PR review comments
• Make startTime/endTime non-optional states
• Fix type cast in onInputStartTimeSelected/onInputEndTimeSelected
• Add normalizeTime helper and normalize times before emitting concludeDatepicker
• Fix Storybook useEffect memory leak
• Add unit tests for formatTimeInput and normalizeTime
• Standardize bdsStartDate/bdsEndDate event value format to dd/mm/yyyy
• Fix double-emission: add event.stopPropagation() in selectDate/selectEndDate
• Add FrameworkReactPeriodTime Storybook story showing all events with React wrapper

[github-actions]

PR Preview Action v1.8.1
🚀 View preview at https://takenet.github.io/blip-ds/pr-preview/pr-1158/
Built to branch gh-pages at 2026-04-10 22:29 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[tuliorezende]

@copilot

On the generated date fields I can't see the selected hours, only when I click in the box to select again

[Copilot]

@copilot

...

Fixed in commit 3014ea0 (24h format) and now also in the latest commit: the "De"/"Até" trigger inputs for period-time mode now display both the date and the selected time (e.g. 08/04/2026 09:00). The inputs are switched to type="text" + readonly so the combined value is always visible after closing the picker, and it updates reactively as the user changes the time fields inside the popup.

[tuliorezende]

@copilot before click in the field to insert the periods I can't see the "mask"

The previous issue now is solved: i can see the date and time after select properly

but

to keep the behavior and turn more friendly to user, would be cool to keep the mask in the "period-time" type as well

[tuliorezende]

@copilot check the pull request comments and adjust if necessary

[Copilot]

@copilot check the pull request comments and adjust if necessary

All 5 review points addressed in commit fix(datepicker): address PR review feedback:

• startTime/endTime non-optional — removed ? from both @State() declarations so they are always string.
• Type cast fixed — onInputStartTimeSelected/onInputEndTimeSelected now cast ev.target to HTMLBdsInputElement | null and use input.value ?? ''.
• Time normalization before emit — added normalizeTime helper that pads partial values (12:3 → 12:03, 9 → 09:00); clickConcludeDatepicker normalizes both times and writes back to state before emitting the payload.
• Storybook useEffect fixed — added [] dependency array and a cleanup that removes all event listeners, preventing duplicate handlers.
• Unit tests added — 17 new tests covering formatTimeInput (digit stripping, colon insertion, clamping) and normalizeTime (padding, invalid input); all 184 tests pass.

[tuliorezende]

@copilot The events when I change the date and I change the hour are resulting in different values. Can you adjust the values on events to standarize the values?

[Copilot]

@copilot The events when I change the date and I change the hour a...

Fixed in the latest commit. The bdsStartDate and bdsEndDate events now emit { value: "dd/mm/yyyy" } (using dateToString) instead of a raw JS Date object, matching the format used in the concludeDatepicker payload. All 184 tests pass.

[tuliorezende]

after the latests updates

@copilot

can you provide some react snippet in this pull request about how can I retrieve the start and end values (with date and times)?

[Copilot]

after the latests updates

@copilot
...

A live working example has been added to Storybook as the FrameworkReactPeriodTime story (commit 07af17d).

Here's how to retrieve all values in React after the latest updates:

import { BdsDatepicker } from 'blip-ds/dist/blip-ds-react';

function MyComponent() {
  const handleConclude = (event: CustomEvent) => {
    const { startDate, startTime, endDate, endTime } = event.detail;
    // startDate / endDate → "dd/mm/yyyy"  (e.g. "01/04/2026")
    // startTime / endTime → "HH:MM"       (e.g. "10:00")
    console.log(`De:  ${startDate} ${startTime}`); // "01/04/2026 10:00"
    console.log(`Até: ${endDate} ${endTime}`);     // "17/04/2026 23:59"
  };

  return (
    <BdsDatepicker
      typeOfDate="period-time"
      startDateLimit="31/12/2022"
      endDateLimit="01/01/2027"
      onConcludeDatepicker={handleConclude}
      onBdsStartDate={(e) => console.log('Data inicial:', e.detail.value)} // "dd/mm/yyyy"
      onBdsEndDate={(e) => console.log('Data final:', e.detail.value)}     // "dd/mm/yyyy"
      onEmptyConcludeDatepicker={() => { /* picker reset — clear state */ }}
    />
  );
}

Event summary:

Event	When	event.detail
onBdsStartDate	Start date clicked	{ value: "dd/mm/yyyy" }
onBdsEndDate	End date clicked	{ value: "dd/mm/yyyy" }
onConcludeDatepicker	"Concluir" with dates	{ startDate, endDate, startTime, endTime }
onEmptyConcludeDatepicker	"Concluir" with no dates	(no payload)