Date time picker example with (attributes)

Use class: date-time-picker-default and add attribute(as need) for get date-time-picker

Special method with attributes

defaultDate, minDate, maxDate attributes supports string today, tomorrow, yesterday and any dates defaultDate="09-15-2024 05:00 PM"

Others attributes : ( Attribute: Value )

  • dateRange true / false
  • dateRange true / false
  • defaultDate "10-01-2024 09:53 AM"
  • icon.time 'fa-solid fa-clock'
  • icon.date 'fa-solid fa-calendar'
  • icon.up 'fa-solid fa-arrow-up'
  • icon.down 'fa-solid fa-arrow-down'
  • icon.previous 'fa-solid ffa-chevron-left'
  • icon.next 'fa-solid ffa-chevron-right'
  • icon.today 'fa-solid ffa-calendar-check'
  • icon.clear 'fa-solid fa-trash'
  • icon.close 'fa-solid fa-xmark'
  • sideBySide true / false
  • calendarWeeks true / false
  • viewMode "calendar" / "clock"
  • toolbarPlacement "bottom" / "top"
  • keepOpen true / false
  • buttons.today true / false
  • buttons.clear true / false
  • buttons.close true / false
  • calendar true / false
  • date true / false
  • month true / false
  • year true / false
  • decades true / false
  • clock true / false
  • hours true / false
  • minutes true / false
  • seconds true / false
  • inline true / false
  • theme "light" / "dark"
  • format see formats
  • clock true / false
  • calendar true / false
  • month "long" / "short"
  • year true / false
  • startOfTheWeek 0 ~ 6
  • multipleDates true / false
  • multipleDatesSeparator ", / -" comma, slash
    or high-pen
  • promptTimeOnDateChange true / false
  • promptTimeOnDateChangeTransitionDelay 200 ~ ♾️
  • minDate "10-01-2024 09:53 AM"
  • maxDate "20-01-2024 09:53 AM"
  • disabledDates "10-01-2024, 12-01-2024"
  • enabledDates "10-01-2024, 12-01-2024"
  • daysOfWeekDisabled 0 ~ 6
  • disabledHours 1 ~ 23
  • enabledHours 1 ~ 23
  • stepping 1 ~ 30
  • useCurrent true / false

Date time picker example : ( Manually )

Date time picker settings

Basic options
- click to date range allow or not
- click to allow multiple date or not
- prompt: after select date go to time
- input on click to write current date
- click to show date and time sideBySide
- click to show calendarWeeks
- Calender show (inline)
add buttons in calender
- go to today button add
- input clear button add
- close calender button add

Components show / hide : 👆

Display options
Date and Time Enable / Disable input's :
Minimum date :
Maximum date :
disabledDates :
enabledDates :
daysOfWeekDisabled :
disabledHours :
enabledHours :

More
Token Description Result
yy 2 digit year 22
yyyy 4 digit year 2022
M 1-2 digit month, e.g. 1...12 7
MM 2 digit month 07
MMM Short Month Jul
MMMM Full Month July
d 1-2 digit day, e.g. 1...31 4
dd 2 digit day 04
ddd Short Weekday Mon
dddd Full Weekday Monday
H 1-2 digit hour (24 hour) 13
HH 2 digit hour (24 hour) 13
h 1-2 digit hour (12 hour) 1 (PM)
hh 2 digit hour (12 hour) 01 (PM)
m 1-2 digit minute, e.g. 0...59 29
mm 2 digit minute, e.g. 0...59 29
s 1-2 digit second, e.g. 0...59 47
ss 2 digit second, e.g. 0...59 47
T Meridiem PM

Nice Select 2 Example

Single select

</>

Multi select

</>

Note: Working with only M2SaaS Website _LayoutAdmin :

  1. ClassName : select DOM এ nice-select-two use করলে nice selector add হয়ে যাবে
  2. Search : select DOM এ attribute searchable="true" add করলে search option আসবে
  3. Search Placeholder : placeholder এ searchtext="Search..." ব্যবহার করে text change করা যাবে।
More