Calendar Popup

The project is written on TypeScript + Less.

For tests it uses Mocha + Chai.

For datetime parsing it uses MomentJS

Build is composed using WebPack

Buy Issues Licenses

Examples

Simple Date Time Picker

Only Date Picker

Disable buttons

Get start

First include to page css and js files

<!-- this should go after your </body> -->
<link rel="stylesheet" href="/build/calendar.css"/>
<script src="/build/calendar.full.min.js"></script>

Archive has 3 bundle files

• build/calendar.full.min.js - Contains a file of locales and momentjs
• build/calendar.with-moment.min - Contains momentjs
• build/calendar.min.js - Only plugin without another libraries. Use this bundle then you already have MomentJS on your page

Init

var calendar = new CalendarPopup('#source_input');

or you can replace all Date inputs

var calendars = new CalendarPopups('input[type=date]');

you can use jQuery

var $calendars = $('input[type=date]').CalendarPopup();
// for access to native CalendarPopups use $calendars.eq(0).data('calendar-popup')

By default popup is shown when user sets focus inside source element, but you can show it from your code

var calendar = new CalendarPopup('#source_input');
calendar.popup.show();
calendar.popup.hide();
calendar.popup.toggle();

Destruct

This code will destruct calendar

var calendar = new CalendarPopup('#source_input');
calendar.destructor();

Locale

You can change language using locale option

var calendar = new CalendarPopup('#source_input', {
    locale: 'de'
});

Possible values:

en,af,ar-dz,ar-kw,ar-ly,ar-ma,ar-sa,ar-tn,ar,
az,be,bg,bn,bo,br,bs,ca,cs,cv,cy,da,de-at,de-ch,
de,dv,el,en-au,en-ca,en-gb,en-ie,en-nz,eo,es-do,
es,et,eu,fa,fi,fo,fr-ca,fr-ch,fr,fy,gd,gl,
gom-latn,he,hi,hr,hu,hy-am,id,is,it,ja,
jv,ka,kk,km,kn,ko,ky,lb,lo,lt,lv,me,
mi,mk,ml,mr,ms-my,ms,my,nb,ne,nl-be,nl,
nn,pa-in,pl,pt-br,pt,ro,ru,sd,se,si,
sk,sl,sq,sr-cyrl,sr,ss,sv,sw,ta,te,tet,
th,tl-ph,tlh,tr,tzl,tzm-latn,tzm,uk,
ur,uz-latn,uz,vi,x-pseudo,yo,
zh-cn,zh-hk,zh-tw 

Mask

Hide mask

var calendar = new CalendarPopup('#source_input', {
    showMask: false
});

Disable mask

var calendar = new CalendarPopup('#source_input', {
    mask: false
});

Disable validate on blur

var calendar = new CalendarPopup('#source_input', {
    validateOnBlur: false
});

Deny empty value

var calendar = new CalendarPopup('#source_input', {
    allowBlank: false
});

Show week Index

 var calendar = new CalendarPopup('#source_input', {
     showWeekIndex: true
 });

Input Output

Datetime format

You can change datetime format. Use format option

var calendar = new CalendarPopup('#source_input', {
    format: 'YYYY/MM/DD HH:mm'
});

Set value

var calendar = new CalendarPopup('#source_input', {
    format: 'DD.MM.YYYY'
});
calendar.value.set(new Date());
calendar.value.set('12.12.2012');
calendar.value.setYear(1998);

Get value

var calendar = new CalendarPopup('#source_input');
console.log(calendar.value.get()); // Date
console.log(calendar.value.getString()); // string

Start of week

By default it uses Sunday like a first day of week

var calendar = new CalendarPopup('#source_input', {
    dayOfWeekStart: true
});

Inline mode

You can use calendar in inline mode

var calendar = new CalendarPopup('#source_input', {
    inlineMode: true // Monday
});

TimePicker & DatePicker

Hide Timepicker

var calendar = new CalendarPopup('#source_input', {
    timepicker: false
});

Hide DatePicker

var calendar = new CalendarPopup('#source_input', {
    datepicker: false
});

Allow not fill time

and you can use two variants of DateTime format: with time and without time

var calendar = new CalendarPopup('#source_input', {
    allowNotFillTime: true,
    formatWithoutTime: 'YYYY/MM/DD',
});

Wrapper

By default source input is wrapped into wrap block. Disable this

var calendar = new CalendarPopup('#source_input', {
    wrapSourceInput: false,
    allowKeyBoardEdit: true,
});

Buttons

Hide Close button

var calendar = new CalendarPopup('#source_input', {
    closeButton: false
});

Hide Chose button

var calendar = new CalendarPopup('#source_input', {
    choseButton: false
});

Behaviors

Disable MouseWheel behavior

var calendar = new CalendarPopup('#source_input', {
    mousewheel: false
});

Chose date on one click

var calendar = new CalendarPopup('#source_input', {
    choseOnClick: true
});

Events

var calendar = new CalendarPopup('#source_input');

update

update datetime state

calendar.datetime.on('update', function () {
    console.log(calendar.datetime.get());
});

update_time

Was updated only time

calendar.datetime.on('update_time', function () {
    console.log(calendar.datetime.get());
});

after_init

Fire after init plugin

calendar.datetime.on('after_init', function () {
    calendar.destructor;
});

native_change

Fire then source input element change value

calendar.datetime.on('native_change', function () {
    console.log(calendar.nativeElement.value);
});

chosen

datetime or date was chosen

calendar.datetime.on('chosen', function () {
    console.log(calendar.datetime.get());
});

after_redraw

Calendar was repainted

calendar.datetime.on('after_redraw', function () {
    var weekends = calendar.popup.container.querySelectorAll('.calendar-popup-month-dates.calendar-popup-month-dates_weekend');
    for (var i = 0; i < weekends.length; i += 1) {
        weekends[i].classList.remove('calendar-popup-month-dates_weekend');
    }
});

close_popup

popup will be closed

calendar.datetime.on('close_popup', function () {
    calendar.destructor();
});

ReBuild

Build bundle files

npm install
npm run build

or run Hot Module Replacement server

npm install
npm start