search

finos / messageml-utils

MessageML is a markup language used by the Symphony Agent API for representing messages, including formatting (bold, italic, numbered and unnumbered lists etc.) and entity data representing structured objects.
https://docs.developers.symphony.com
Apache License 2.0
12 stars 28 forks source link

Datepicker support #215

Closed symphony-enrico closed 3 years ago

symphony-enrico commented 3 years ago

Support for a new kind of element, called date-picker. This element can have a title (tooltip) and a label, that generate related spans.

<!-- MessageML -->
<date-picker 
      name="date-travel"
      value="2020-09-15"
      title="This is \n a hint"
      label="Departure date"
      placeholder="Please pick a date"
      min="2020-09-01"
      max="2020-09-29"
      disabled-date="[{'day': '2020-09-23'}, {'from': '2020-09-18', 'to': '2020-09-20'}, {'daysOfWeek': [0,1]}]"      highlighted-date="[{'day': '2020-09-24'}, {'from': '2020-09-26', 'to': '2020-09-28'}, {'day': '2020-09-03'}, {'daysOfWeek': [4,6]}]"      required="true"
      format="yyyy-MM-dd"
/>

<!-- PresentationML -->
<div class="date-picker-group" data-generated="true">
  <label for="date-picker-Wc2fa7O7e">Departure date</label>
  <span class="info-hint" data-target-id="date-picker-Wc2fa7O7e" data-title="This is \n a hint"></span>
  <input name="date-travel" 
    value="2020-09-15"
    placeholder="Please pick a date"
    min="2020-09-01"
    max="2020-09-29"
   data-disabled-date="[{'type': 'date', 'day': '2020-09-23'}, {'type': 'range', 'from': '2020-09-18', 'to': '2020-09-20'}, {'type': 'weekdays', 'daysOfWeek': [ 0, 1 ]}]" 
   data-highlighted-date="[{'type': 'date', 'day': '2020-09-24'}, {'type': 'range', 'from': '2020-09-26', 'to': '2020-09-28'}, {'type': 'date', 'day': '2020-09-03'}, {'type': 'weekdays', 'daysOfWeek': [ 4, 6 ]}]" 
   required="true" 
   data-format="yyyy-MM-dd" 
   id="date-picker-Wc2fa7O7e"></input>
</div>

MessageML

Attribute name Optional Type Max length Attribute description  
name false String 64 Identifies the picker
value true String “yyyy-MM-dd” 64 date with ISO_8601 format (yyyy-MM-dd)
title true String and accept \n 64 Description of the Element that will be shown in a hint
label true String 64 Label that will be displayed on top of the Element
required true String (true or false) 64 If true, it specifies that the input field must be filled out before submitting the form.Accepted values; true and false.
placeholder true String 64 If null, use display the accepted format
min true String “yyyy-MM-dd” 64 The earliest acceptable date with ISO_8601 format (yyyy-MM-dd)
max true String “yyyy-MM-dd” 64 The latest acceptable date with ISO_8601 format (yyyy-MM-dd)
disabled-date true Array of json, in string format 1024 Date or Range Date to disable, it can be day of week as well[ {'from': 'YYYY-MM-DD’, to: 'YYYY-MM-DD’}, {'day': 'YYYY-MM-DD’ }, {'day': 'YYYY-MM-DD’ }, {'day': 'YYYY-MM-DD’ }, {'from': 'YYYY-MM-DD’, to: 'YYYY-MM-DD’}, {'daysOfWeek': [0, 1]} ]Note: for daysOfWeek 0 always corresponds to Sunday, 6 corresponds to Saturday
highlighted-date true Array of json, in string format 1024 Date or Range Date to highlight, it can be day of week as well[ {'from': 'YYYY-MM-DD’, 'to': 'YYYY-MM-DD’}, {'day': 'YYYY-MM-DD’ }, {'day': 'YYYY-MM-DD’ }, {'day': 'YYYY-MM-DD’ }, {from: 'YYYY-MM-DD’, 'to': 'YYYY-MM-DD’}, {'daysOfWeek': [0, 1]} ]
format true String 64 Format of the date to write on the input field, doesn’t affect value, disabled-date nor highlighted-date props formatFollow this guideline http://www.unicode.org/reports/tr35/tr35-31/tr35-dates.html#Date_Format_Patterns

PresentationML

Attribute name Optional Type Max length Attribute description
name false String   Identifies the picker
value true String “yyyy-MM-dd”   date with ISO_8601 format (yyyy-MM-dd)
title true String and accept \n   Description of the Element that will be shown in a hint
label true String   Label that will be displayed on top of the Element
required true String (true or false)   If true, it specifies that the input field must be filled out before submitting the form.Accepted values; true and false.
placeholder true String   If null, use display the accepted format
min true String “yyyy-MM-dd”   The earliest acceptable date with ISO_8601 format (yyyy-MM-dd)
max true String “yyyy-MM-dd”   The latest acceptable date with ISO_8601 format (yyyy-MM-dd)
data-disabled-date true Array of json, in string format 1024 Date or Range Date to disable, it can be day of week as well type:  should be added during the presentationML transformation, more details above the table[ {type: "range", from: 'YYYY-MM-DD’, to: 'YYYY-MM-DD’}, {type: "date", day: 'YYYY-MM-DD’ }, {type: "date", day: 'YYYY-MM-DD’ }, {type: "date", day: 'YYYY-MM-DD’ }, {type: "range", from: 'YYYY-MM-DD’, to: 'YYYY-MM-DD’}, {type: "weekdays", daysOfWeek: [0, 1]} ]Note: for daysOfWeek 0 always corresponds to Sunday, 6 corresponds to Saturday
data-highlighted-date true Array of json, in string format 1024 Date or Range Date to highlight, it can be day of week as well type:  should be added during the presentationML transformation[ {type: "range", from: 'YYYY-MM-DD’, to: 'YYYY-MM-DD’}, {type: "date", day: 'YYYY-MM-DD’ }, {type: "date", day: 'YYYY-MM-DD’ }, {type: "date", day: 'YYYY-MM-DD’ }, {type: "range", from: 'YYYY-MM-DD’, to: 'YYYY-MM-DD’}, {type: "weekdays", daysOfWeek: [0, 1]} ]
data-format true String   Format of the date to write on the input field, doesn’t affect value, disabled-date nor highlighted-date props format