Add Element Time Picker

[symphony-mariacristina]

MessageML

TagName <time-picker … /> TimePicker follows the same logic as<date-picker … />, it natively correspond to input type=”date”.

Attribute name	Optional	Type	Max length	Attribute description
name	false	String	default	Identifies the time picker
value	true	String	default	date with ISO_8601 format (HH:mm:ss) HH = two digits of hour (00 through 23) (am/pm NOT allowed) mm = two digits of minute (00 through 59) ss = two digits of second (00 through 59) https://www.w3.org/TR/NOTE-datetime
format	true default: HH:mm:ss	String	default	Format of the time to write on the input field and to display the time in the Dropdown. Doesn’t affect value and disabled-time props format. Follow this guideline http://www.unicode.org/reports/tr35/tr35-31/tr35-dates.html#Date_Format_Patterns
strict	true default: false	Boolean	default	Enforce that the user cannot select a time that is not in the proposed list
title	true	String and accept ‘\n’	default	Description of the Element that will be shown in a hint
label	true	String	default	Label that will be displayed on top of the Element
required	true	Boolean	default	If true, it specifies that the input field must be filled out before submitting the form.
placeholder	true	String	default	If null, it displays the accepted format hh:mm
min	true	String	default	The earliest acceptable time with ISO_8601 format (HH:mm:ss) including leading zeros
max	true	String	default	The earliest acceptable time with ISO_8601 format (HH:mm:ss) including leading zeros
step	true Default: “900”(15min * 60s)	Number	default	The stepping interval to use for user interface. Min value: 600Min Max value: 43200
disabled-time	true	Array of json, in string format	1024	Time or Range Time to disable. ‘from' and 'to’ are included in the disabled times. (24-hour format)

PresentationML

Attribute name	Optional	Type	Max length	Attribute description
name	false	String	default	Identifies the time picker
value	true	String	default	date with ISO_8601 format
data-format	true	String	default	Format of the time to write on the input field and to display the time in the Dropdown.
data-strict	true default: false	Boolean	default	Enforce that the user cannot select a time that is not in the proposed list
title	true	String and accept ‘\n’	default	Description of the Element that will be shown in a hint
label	true	String	default	Label that will be displayed on top of the Element
required	true	Boolean	default	If true, it specifies that the input field must be filled out before submitting the form.
placeholder	true	String	default	If null, it displays the accepted format hh:mm
min	true	String	default	The earliest acceptable time with ISO_8601 format (HH:mm:ss) including leading zeros
max	true	String	default	The earliest acceptable time with ISO_8601 format (HH:mm:ss) including leading zeros
step	true	Number	default	The stepping interval to use for user interface.
data-disabled-time	true	Array of json, in string format	1024	Time or Range Time to disable. ‘from' and 'to’ are included in the disabled times. (24-hour format)

Example of MessageML / PresentationML

Without label and/or title

<!-- MessageML -->
<messageML>   
  <form id="example">                        
    <time-picker 
      name="time-meeting"
      value=“14:00:00”
      format="hh:mm a"
      strict="true"
      placeholder="Please pick a time"
      min="08:00:00"
      max="18:00:00"
      step="1800"
      disabled-time='[{"from": "12:00:00", "to": "14:00:00"}, {"time": "16:00:00"}]
    />
    <button name="send-answers" type="action">Submit</button>
  </form>
</messageML>

<!-- PresentationML -->
<div data-format="PresentationML" data-version="2.0"> 
  <form id="example"> 
    <input type="time" 
      name="time-meeing"
      value=“14:00:00”
      placeholder="Please pick a date"
      min="08:00:00"
      max="18:00:00"
      step="1800"
      data-format="hh:mm a"
      data-strict="true"
      data-disabled-time='[{"type": "range", "from": "12:00:00", "to": "14:00:00"},
                           {"type": "time", "time": "16:00:00"}]'
      required="true"
    />
    <button type="action" name="send-answers">Submit</button> 
  </form> 
</div>

With a label and/or title

<!-- MessageML -->
<messageML>   
  <form id="example">                        
    <time-picker 
      name="time-meeting"
      title="This is \n a hint"
      label="Meeting time"
      value=“14:00:00”
      format="hh:mm a"
      strict="true"
      placeholder="Please pick a time"
      min="08:00:00"
      max="18:00:00"
      step="1800"
      disabled-time='[{"from": "12:00:00", "to": "14:00:00"}, {"time": "16:00:00"}]
    />
    <button name="send-answers" type="action">Submit</button>
  </form>
</messageML>

<!-- PresentationML -->
<div data-format="PresentationML" data-version="2.0"> 
  <form id="example">
    <div class="time-picker-group" data-generated="true">
      <label for="time-picker-{uniqueLabelId}">Departure date</label>
      <span class="info-hint" data-title="This is \n a hint"
                              data-target-id="time-picker-{uniqueLabelId}"></span>
      <input type="time"
        id="time-picker-{uniqueLabelId}" 
        name="time-meeing"
        value=“14:00:00”
        placeholder="Please pick a date"
        min="08:00:00"
        max="18:00:00"
        step="3600"
        data-format="hh:mm a"
        data-strict="true"
        data-disabled-time='[{"type": "range", "from": "12:00:00", "to": "14:00:00"},
                            {"type": "time", "time": "16:00:00"}]'
        required="true"
      />
    </div>
    <button type="action" name="send-answers">Submit</button> 
  </form> 
</div>