Web component: j-Calendar


  • Info
  • HTML
  • JS
  • CSS
  • Meta

j-Calendar

Configuration:

Example: data-jc-config="required:true;icon:envelope;format:dd.MM.yyyy;type:date"

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

The component is need to call manually or works with textbox component automatically. The calendar component is a singleton and the browser works with the one instance only. Other instantes are not compiled and won't be used.

  • works only with Bootstrap Grid System (otherwise is need to fix CSS)

Usage

var ELEMENT = $(document);
var PATH = 'some.path.to.date';
var X_OFFSET = 100;
FIND('calendar').toggle(ELEMENT, PATH, function(date) {
   console.log('SELECTED DATE:', date);
}, X_OFFSET);

Date parsing from String

// Registers a parser
// for example: "dd-MM-yyy"
SETTER(true, 'calendar', 'parser', function(path, value, type) {
    var arr = value.split('-');
    var dt = new Date((arr[2] || '').parseInt(DATETIME.getFullYear()), ((arr[1] || '').parseInt(DATETIME.getMonth() + 1) - 1), (arr[0] || '').parseInt(DATETIME.getDate()));
    return dt;
});

Author

Browser‘s Save action performs Preview