Web UI component: j-DatePicker

  • Info
  • HTML
  • JS
  • CSS
  • Meta


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


  • firstday {Number} first day in the week
  • today {String} a label for Set today button
  • close {String} a label for close button
  • days {String} days e.g. SU,MO,TU,WE,TH,FR,SA (default).
  • months {String} months e.g. January,February,... (default).
  • yearselect {Boolean} dropdown with years (default true).
  • monthselect {Boolean} dropdown with months (default true).
  • yearfrom {String} sets minimum year limit in dropdown e.g. -5 years current (default -100 years).
  • yearto {String} sets maximum year limit in dropdown +5 years current (default current).

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


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

SETTER('datepicker', 'show', opt);