SDatetimePickerComponent

Platform  

html

   │    Support  

Chromium supported

Firefox supported

Safari supported

Edge supported

Since  2.0.0

   │   

Olivier Bossel

   │   

beta

  Preview

  Features

  Import

  Install

  Events

1. s-datetime-picker.change

   Dispatched when the datepicker change value

2. s-datetime-picker

   Dispatched for every events of this component. Check the detail.eventType prop for event type

  Interface

1. name

   color

   String

   Specify the name that will be assigned to the injected input if you don't provide one yourself

2. value

   String

   Specify the initial value for your picker

3. updateInput

   ["select","validate","reset","clear","close"]

   • select
   • validate
   • reset
   • clear
   • close

   Array<String>

   Specify when you want to updat the attached input. Can be "pointermove", "pointerup", "pointerdown", "input", "validate", "close"

4. format

   YYYY-MM-DD

   String

   Specify the format of the color you want as end in the input value. Can be "hex", "hexa", "rgb", "rgba", "hsl" or "hsla"

5. inline

   false

   Boolean

   Specify if you want to initalize the color picker inline or if you want it to be displayed only when the focus is in the input

6. calendar

   false

   Boolean

   Specify if you want to display a calendar or not

7. i18n

   {"reset":"Reset","clear":"Clear","validate":"Validate","months":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]}

   Object

   Specify some translations for the color picker. You can translate the "reset", "clear" and "validate" buttons

8. placeholder

   Select a color

   String

   Specify the placeholder that will be assigned to the injected input if you don't provide one yourself

9. floatSettings

   {}

   Object

   Specify some float settings to pass to the "makeFloat" function of the sugar toolkit

10. copyIconClass

    s-icon s-icon--copy

    String

    Specify the class you want to apply on the "i" that display the "copy" icon

11. copiedIconClass

    s-icon s-icon--copied

    String

    Specify the class you want to apply on the "i" that display the "copy" icon when the color has been copied

12. buttonIconClass

    s-icon s-icon--color

    String

    Specify the class you want to apply on the injected button icon

13. backdropClass

    s-backdrop

    String

    Specify the class to apply on the backdrop when the "backdrop" prop is true

14. disable

    []

    Array<String>

    Specify what you want to disable. It can be "weekend", "week" or "2022-12-19" (dates)

15. disabled

    false

    Boolean

    Specify if the color picker is disabled

16. backdrop

    false

    Boolean

    Specify if you want the ".s-backdrop" element or not

17. actions

    ["reset","validate"]

    • clear
    • reset
    • validate

    Array<String>

    Specify the actions buttons you want to display. Can be "clear", "reset" and "validate". If false, hide all button

18. hours

    [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23]

    Array<Number>

    Specify the hours you want in the time selector

19. minutes

    [0,5,10,15,20,25,30,25,40,45,50,55]

    Array<Number>

    Specify the minutes you want in the time selector

20. fromYear

    1923

    Number

    Specify the first year to allow selection from

21. toYear

    2123

    Number

    Specify the last year to allow selection from

  Related resource(s)

date-format-parse

Lightweight date format and parse. Latest version: 0.2.7, last published: 2 years ago. Start using date-format-parse in your project by running `npm i date-format-parse`. There are 43 other projects in the npm registry using date-format-parse.

Check out more...