captzdevs / calendar-ui

c-calendar.js 🗓️

option

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum..

default setting

setting {
    default : ,   
    format : ,        
    separation : ,      
    lang : ,                      
    yearType : ,         
    selectable  : ,      
    showDay     : ,      
    monthPanel  : ,          
    yearPanel  :  ,     
    min  : ,           
    max  : ,             
    startWith  : ,       
    closeOnSelect : , 
    
}

---

option / default

default is start date defualt of calendar that show in calendar panel

default : "now" type : string

explanation

  //set current date to default date 
    default : "now" 

  // set 10/09/2022 to default date 
    default : "20220910" 

option / format

format is how date will display in input and it can switch positions such as "mm/dd/yyyy" , "yyyy/mm/dd" .

default : "dd/mm/yyyy"
type : string

explanation

  dd = Date with zero
  d = Date with no zero
  
  mm = Month with zero
  m  = Month with no zero
  
  MM = Month with full name
  M = Month with abbreviation name
  
  yyyy = year with 4 digit
    yy = year with 2 digit

option / separation

format is how date will separation in input

default : "/"
type : string

explanation

defualt : 20020321
format : 'dd/mm/yyyy',
separation : '-',

//display 
21-03-2002

option / lang

Lang is how lang type show in input

default : "en"
type : string

explanation

defualt : 20020321
format : 'dd/MM/yyyy',
separation : '-',
lang : "en"

//display 
21-march-2002

option / zoro

option / yearType

option / selectable

calendar-ui's Issues

Bug : display wrong day in AD year type ⚠

yearType : "AD"

year = 2565 ✅

year = 2022 ❌

Fix : Can change date by edit dataset fulldate directly html

⚠Problem : if change dataset fulldate directly html calendar will re render date over max or bolow min date

💡 Solution : when change fulldate dataset directly html must not re render date