Web UI component: j-DatePicker


  • Info
  • HTML
  • JS
  • CSS
  • Meta

j-DatePicker

  • it's improved clone of j-Calendar
  • supports dark mode
  • supports touch gestures (swipe) and fixed full size on mobile

Configuration:

  • firstday {Number} first day in the week
  • today {String} a label for Set today button
  • days {String} days e.g. SU,MO,TU,WE,TH,FR,SA (default).
  • months {String} months e.g. January,February,... (default).

The component must be called manually or works with j-Input component automatically. The component is a singleton.

  • important add the calendar component under <body> element

Usage

var opt = {};
opt.element = YOUR_ELEMENT;
opt.value = new Date();
// or opt.value = 'path.to.date'; --> then "opt.callback" is disabled
// opt.align {String}      : align "left" (default), "center" or "right"
// opt.position {String}   : position "top" (default) or "bottom"

opt.callback = function(newdate) {
    console.log('date has been changed');
};

// opt.offsetX {Number} "x" offset
// opt.offsetY {Number} "y" offset
// opt.close {Function} optional, this function can determine closing of DatePicker

// NEW and OPTIONAL
// It's callend when the DatePicker changes year/month
opt.badges = function(date, append) {
    // Appends small and red badges to the current view/month
    append([date1, date2, date3]);
};

SETTER('datepicker/show', opt);

Author