Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Twilio Paste - time-picker
Getting started
Twilio Paste
Paste UI
Pro
Components
Account Switcher
Ai Chat Log
Alert
Alert Dialog
Anchor
Aspect Ratio
Avatar
Badge
Blockquote
Breadcrumb
Button
Button Group
Callout
Card
Chart Provider
Chat Composer
Chat Log
Checkbox
Code Block
Combobox
Corner Ornament
Data Grid
Date Picker
Description List
Detail Text
Disclosure
Display Heading
Display Pill Group
Editable Code Block
Example Text
File Picker
File Uploader
Flex
Form Layout
Form Pill Group
Grid
Heading
Help Text
Icon
In Page Navigation
Inline Code
Input
Keyboard Key
Label
List
Media Object
Menu
Meter
Minimizable Dialog
Modal
Multiselect Combobox
Page Header
Pagination
Paragraph
Popover
Product Switcher
Progress Bar
Progress Steps
Radio Button Group
Radio Group
Screen Reader Only
Select
Separator
Side Modal
Side Panel
Sidebar
Sidebar Navigation
Skeleton Loader
Slider
Spinner
Stack
Status Badge
Status Menu
Summary Detail
Switch
Table
Tabs
Textarea
Time Picker
Timeline
Toast
Tooltip
Topbar
Truncate
User Dialog
Visual Picker
may not be fully accessible</strong> in all cases.</p> <div class="browser-comparison"> <div class="browser-card"> <h4>Chrome/Edge</h4> <ul> <li>Default value is "--:-- --"</li> <li>Clock pop-up is triggered by clicking on the clock icon</li> <li>Scrollable time selector pop-up</li> </ul> </div> <div class="browser-card"> <h4>Safari</h4> <ul> <li>Default value is 12:30 PM</li> <li>No clock icon or time selector pop-up</li> <li>Only usable by keyboard (number or arrow keys)</li> </ul> </div> <div class="browser-card"> <h4>Firefox</h4> <ul> <li>Default value is "--:-- --"</li> <li>No clock icon or time selector pop-up</li> <li>Only usable by keyboard (number or arrow keys)</li> </ul> </div> </div> <!-- Accessibility Section --> <h3>Accessibility</h3> <div class="accessibility-list"> <ul> <li>Include a visible label on <strong>all</strong> Time Pickers.</li> <li>Each label must use the <span class="code-inline">htmlFor</span> prop that matches the <span class="code-inline">id</span> of the associated input.</li> <li>Use one of 3 ways to label a Time Picker: <ul> <li>Visible label with Label (preferred)</li> <li>Visible label that's associated to the Time Picker with <span class="code-inline">aria-labelledby</span></li> <li>Label directly using <span class="code-inline">aria-label</span></li> </ul> </li> <li>Provide clear identification of required fields in the label or at the start of a form.</li> <li>Include inline error text with the error icon on any field that errors.</li> <li>If the Time Picker has associated Help Text or error text, include the <span class="code-inline">aria-describedby</span> prop on the Time Picker.</li> </ul> </div> <!-- Examples Section --> <h2>Examples</h2> <!-- Required Time Picker --> <div class="example-section"> <h3>Required Time Picker</h3> <div class="info-callout"> <p>Make sure to connect the <span class="code-inline">Label</span> to the <span class="code-inline">TimePicker</span>. This is done with the <span class="code-inline">htmlFor</span> prop on the label, and the <span class="code-inline">id</span> prop on the Time Picker.</p> </div> <div class="time-picker-container" id="required-example"></div> </div> <!-- Time Range Picker --> <div class="example-section"> <h3>Time Range Picker</h3> <p>The Time Picker doesn't currently support the selection of time ranges within a single input field, however a time range picker can be easily implemented using two side-by-side Time Pickers.</p> <div class="time-picker-container" id="time-range-example"></div> </div> <!-- DateTime Range Picker --> <div class="example-section"> <h3>DateTime Range Picker</h3> <p>Paste pickers don't currently support date time range selections in a single component, however the same functionality can be implemented using a combobox along with the date range and time range picker solutions.</p> <div class="time-picker-container" id="datetime-range-example"></div> </div> <!-- Time Formatting --> <h2>Time Formatting</h2> <p>In addition to the Time Picker, this package exports a <span class="code-inline">formatReturnTime()</span> function that can be used to format the time value that's being returned from the Time Picker.</p> <div class="warning-callout"> <p><strong>Note:</strong> the format of the time being displayed by the Time Picker <em>cannot</em> be changed. The display value is formatted according to the locale of the user's browser.</p> </div> <div class="example-section"> <h3>Format Return Time Example</h3> <div class="time-picker-container" id="format-example"></div> </div> <!-- States Section --> <h2>States</h2> <!-- Error State --> <div class="example-section"> <h3>Time Picker with Inline Error</h3> <p>Change a Time Picker to its error state and add an inline error if the value entered doesn't pass validation requirements.</p> <div class="time-picker-container" id="error-example"></div> </div> <!-- Disabled State --> <div class="example-section"> <h3>Disabled Time Picker</h3> <p>Use a disabled Time Picker to show users that they can't interact with it.</p> <div class="time-picker-container" id="disabled-example"></div> </div> <!-- Read-only State --> <div class="example-section"> <h3>Read-only Time Picker</h3> <p>Use a read-only Time Picker when its value can't be changed, but users should be able to read or apply focus on it.</p> <div class="time-picker-container" id="readonly-example"></div> </div> <!-- Validation Guidelines --> <h2>Validation</h2> <p>Use inline error text to explain how to fix an error. For additional guidance on how to compose error messages, refer to the error state pattern.</p> <table class="validation-table"> <thead> <tr> <th>Situation</th> <th>Recommended phrasing</th> </tr> </thead> <tbody> <tr> <td>User didn't pick a time</td> <td>Select a time.</td> </tr> <tr> <td>The end time is before the start date</td> <td>The end time occurs before the start time.</td> </tr> <tr> <td>The start date is after the end date</td> <td>The start time occurs after the end time.</td> </tr> </tbody> </table> <div class="warning-callout"> <h4>Time Picker and <span class="code-inline">placeholder</span></h4> <p>Because Time Picker has a default display value of <span class="code-inline">--:-- --</span> (and defaults to <span class="code-inline">12:30 PM</span> on Safari), any value that gets passed into <span class="code-inline">placeholder</span> will be overwritten (and effectively ignored).</p> </div> <h2 id="feedback">Feedback</h2> <p>Help us improve this component by providing feedback, asking questions on Slack, or updating this file on GitHub.</p> </div> <script> // Wait for Twilio Paste components to load window.addEventListener('load', function() { setTimeout(function() { if (window.TwilioPaste) { const { TimePicker, Label, HelpText, Box, Stack, Anchor, DatePicker, Combobox, formatReturnTime, CalendarIcon } = window.TwilioPaste; // Basic Example const basicContainer = document.getElementById('basic-example'); if (basicContainer) { basicContainer.innerHTML = ` <label for="basic-time-picker">Select time</label> <input type="time" id="basic-time-picker" style="margin-top: 0.5rem; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px;"> `; } // Required Example const requiredContainer = document.getElementById('required-example'); if (requiredContainer) { requiredContainer.innerHTML = ` <label for="required-time-picker">Appointment time <span style="color: #D61F1F;">*</span></label> <input type="time" id="required-time-picker" required style="margin-top: 0.5rem; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; display: block;"> <div style="margin-top: 0.5rem; font-size: 0.875rem; color: #6B7280;">Select your preferred appointment time.</div> `; } // Time Range Example const timeRangeContainer = document.getElementById('time-range-example'); if (timeRangeContainer) { timeRangeContainer.innerHTML = ` <div class="time-range-container"> <div> <label for="start-time">Start time</label> <input type="time" id="start-time" style="margin-top: 0.5rem; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; width: 100%;"> </div> <div> <label for="end-time">End time</label> <input type="time" id="end-time" style="margin-top: 0.5rem; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; width: 100%;"> </div> </div> <div style="margin-top: 0.5rem; font-size: 0.875rem; color: #6B7280;">Select the time range for your event.</div> `; } // DateTime Range Example const datetimeRangeContainer = document.getElementById('datetime-range-example'); if (datetimeRangeContainer) { datetimeRangeContainer.innerHTML = ` <div class="datetime-range-container"> <div> <label for="preset-select">Quick select</label> <select id="preset-select" style="margin-top: 0.5rem; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; width: 100%;"> <option value="">Choose a preset...</option> <option value="today">Today</option> <option value="tomorrow">Tomorrow</option> <option value="next-week">Next week</option> <option value="custom">Custom range</option> </select> </div> <div class="datetime-inputs"> <div> <label for="start-date">Start date</label> <input type="date" id="start-date" style="margin-top: 0.5rem; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; width: 100%;"> </div> <div> <label for="start-time-dt">Start time</label> <input type="time" id="start-time-dt" style="margin-top: 0.5rem; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; width: 100%;"> </div> </div> <div class="datetime-inputs"> <div> <label for="end-date">End date</label> <input type="date" id="end-date" style="margin-top: 0.5rem; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; width: 100%;"> </div> <div> <label for="end-time-dt">End time</label> <input type="time" id="end-time-dt" style="margin-top: 0.5rem; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; width: 100%;"> </div> </div> </div> `; } // Format Example const formatContainer = document.getElementById('format-example'); if (formatContainer) { formatContainer.innerHTML = ` <label for="format-time-picker">Meeting time</label> <input type="time" id="format-time-picker" style="margin-top: 0.5rem; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; display: block;"> <div id="formatted-output" style="margin-top: 0.5rem; font-size: 0.875rem; color: #6B7280;">Formatted time will appear here</div> `; const formatInput = document.getElementById('format-time-picker'); const formatOutput = document.getElementById('formatted-output'); formatInput.addEventListener('change', function(e) { const timeValue = e.target.value; if (timeValue) { // Simple format conversion (24h to 12h) const [hours, minutes] = timeValue.split(':'); const hour12 = hours % 12 || 12; const ampm = hours >= 12 ? 'PM' : 'AM'; formatOutput.textContent = `Formatted: ${hour12}:${minutes} ${ampm}`; } }); } // Error Example const errorContainer = document.getElementById('error-example'); if (errorContainer) { errorContainer.innerHTML = ` <label for="error-time-picker">Deadline time <span style="color: #D61F1F;">*</span></label> <input type="time" id="error-time-picker" style="margin-top: 0.5rem; padding: 0.5rem; border: 2px solid #D61F1F; border-radius: 4px; display: block;" aria-describedby="error-help"> <div id="error-help" style="margin-top: 0.5rem; font-size: 0.875rem; color: #D61F1F;">Error: Please select a valid time.</div> `; } // Disabled Example const disabledContainer = document.getElementById('disabled-example'); if (disabledContainer) { disabledContainer.innerHTML = ` <label for="disabled-time-picker">System maintenance time</label> <input type="time" id="disabled-time-picker" disabled value="02:00" style="margin-top: 0.5rem; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; display: block; background-color: #f5f5f5; color: #999;"> <div style="margin-top: 0.5rem; font-size: 0.875rem; color: #6B7280;">This time cannot be changed.</div> `; } // Read-only Example const readonlyContainer = document.getElementById('readonly-example'); if (readonlyContainer) { readonlyContainer.innerHTML = ` <label for="readonly-time-picker">Current server time</label> <input type="time" id="readonly-time-picker" readonly value="14:30" style="margin-top: 0.5rem; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; display: block; background-color: #f9f9f9;"> <div style="margin-top: 0.5rem; font-size: 0.875rem; color: #6B7280;">This shows the current server time.</div> `; } } }, 100); }); </script></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">