Best Period Picker

License

Go Back

This license is a legal agreement between you and XDSoft.net for the use of Calendar Popup (all versions) Software (the "Software"). By downloading any version of the Software you agree to be bound by the terms and conditions of this license. XDSoft.net reserves the right to alter this agreement at any time, for any reason, without notice.

Revised on: October 31, 2017

Calendar Popup Installations A Calendar Popup Professional License & OEM License purchases allow a multiple "live" installation in a production environment and ancillary "development use only" installations as needed to support the live installation (such as development and a staging servers). Additional installations do not require additional license purchases. If you have specific installation needs not covered by this license, please contact us: chupurnov@gmail.com

Permitted Use

Calendar Popup License:

PRO License: Holder of the License may use the Software personally or allow use of the Software to their colleagues, clients and users on an unlimited websites engaging a commercial, for-profit or non-for-profit activities. Websites engaging in direct, or indirect commercial activities must purchase a Professional License. Users of the Professional License may include the Software in their projects, products, widgets, extensions, or use in other fair way while developing other products (according to Restrictions below). The Professional License does not allow integration of the Software with open source products with exception to add-ons, extensions and plugins sold or distributed separately from the open source software. The Professional License allows license holder’s products to be sold or distributed otherwise to the end users only, and not to the developers or vendors, who don’t intend to use the Software for actual text editing, but plan to modify and redistribute it to the end user. In case the License holder sell or otherwise distribute the Software to the developers and not to the end users, the License Holder must advise the developers that the developers must purchase their own license in order to use the Software. Support for the holders of the Professional License is limited to one year from the date of purchase. XDSoft.net will be the sole arbiter as to what constitutes commercial activities and fair use.

OEM License: Holders of the OEM License may use the Software as if they had the Professional license. In addition, OEM License holders are allowed to sell or otherwise distribute the Software to the developers and not only to the end users. The OEM license allows license holder’s clients to develop their own products based on or containing Software. The OEM License holder’s clients do not have to obtain their own Professional or OEM license. The OEM License holders are allowed to integrate the Software with open source products. However, neither license holder nor license holder’s clients can sell PeriodPicker as a sole product (with or without modification); License holder and license holder’s clients should use it fairly; XDSoft.net still holds all the copyrights for Software code, Software code does not become open source, and we solely determine "fair use" of the Software. Support for the holders of the OEM License is limited to one year from the date of purchase

Restrictions

Unless you have been granted prior, written consent from XDSoft.net, you may not:

Reproduce, distribute, or transfer the Software as a sole product, or portions thereof, to any third party. Sell, rent, lease, assign, or sublet the Software as a sole product or portions thereof. Grant rights to any other person. Use the software in violation of any United States or international laws or regulations. Display of Copyright Notices All copyright and proprietary notices and logos (if any) of Calendar Popup and/or XDSoft.net within the Software files must remain intact.

Making Copies

You may make copies of the Software for back-up purposes, provided that you reproduce the Software in its original form and with all proprietary notices on the back-up copy. You may include copies of the Software as an integral part of your product (according to Permitted Use stated above).

Software Modification

You may alter, modify, or extend the Software for your own use or for use in as an integral part of your product or service, or commission a third-party to perform modifications for you, but you may not resell, redistribute or transfer the modified or derivative version of the Software as a sole product without prior written consent from XDSoft.net. Components from the Software may not be extracted and used in other programs without prior written consent from XDSoft.net.

Technical Support

Technical support is provided by email only. No representations or guarantees are made regarding the response itself or response time in which support questions are answered. Support service is limited to Bug reports (clients may report malfunctions they have found), Feature Suggestions (clients may suggest a feature to be added to the Software in the future) and Help Requests (clients require help with the Software). For the Bug Reports and Feature Suggestions we reserve the right to solely determine best course of action: we can accept, decline or postpone any work in regards of received Bug Reports or Feature Suggestion. We give no guarantee whatsoever that we will fix any particular malfunction and we reserve the right to determine whether Reported Bug is a malfunction or not. We don’t give any guarantee whatsoever that we will implement any of Suggested Features. We guarantee response to Help request (usually within two business days), but under no circumstances do we guarantee this time frame for all requests. We do, however, aim to provide the best support service possible, and in most cases it takes less time to hear back from us when you need help.

Refund Policy

We offer a 30 day money back guarantee. If for any reason Calendar Popup doesn’t work out for your project, simply email us within 30 days of purchase for a full refund.

Indemnity

You agree to indemnify and hold harmless XDSoft.net for any third-party claims, actions or suits, as well as any related expenses, liabilities, damages, settlements or fees arising from your use or misuse of the Software, or a violation of any terms of this license.

Disclaimer Of Warranty

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, WARRANTIES OF QUALITY, PERFORMANCE, NON-INFRINGEMENT, MERCHANTABILITY, OR FITNESS FOR A PARTICULAR PURPOSE. FURTHER, XDSoft.net DOES NOT WARRANT THAT THE SOFTWARE OR ANY RELATED SERVICE WILL ALWAYS BE AVAILABLE.

Limitations Of Liability

YOU ASSUME ALL RISK ASSOCIATED WITH THE INSTALLATION AND USE OF THE SOFTWARE. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS OF THE SOFTWARE BE LIABLE FOR CLAIMS, DAMAGES OR OTHER LIABILITY ARISING FROM, OUT OF, OR IN CONNECTION WITH THE SOFTWARE. LICENSE HOLDERS ARE SOLELY RESPONSIBLE FOR DETERMINING THE APPROPRIATENESS OF USE AND ASSUME ALL RISKS ASSOCIATED WITH ITS USE, INCLUDING BUT NOT LIMITED TO THE RISKS OF PROGRAM ERRORS, DAMAGE TO EQUIPMENT, LOSS OF DATA OR SOFTWARE PROGRAMS, OR UNAVAILABILITY OR INTERRUPTION OF OPERATIONS.

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

I have already bought the product. How to updade?
By email will be sent the latest version of the product you purchased

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

TimePicker like picker in mobile devices

Draggable, touchable, use mousewheel and keyboard. This plugin can be downloaded with PeriodPicker

   Buy and Download

Options

Name default Descr Ex.
clickAndSelect true You can click on any digit in picker, and this value will choosen {clickAndSelect:false}

Example

jQuery('#timepicker1').TimePickerAlone({
clickAndSelect: false
});


dragAndDrop true Enable/disable drag and drop in picker {dragAndDrop:false}

Example

jQuery('#timepicker2').TimePickerAlone({
dragAndDrop: false
});


mouseWheel true Enable/disable mousewheel in picker {mouseWheel:false}

Example

jQuery('#timepicker3').TimePickerAlone({
mouseWheel: false
});


inverseMouseWheel false if you want reverse mousewhhel behavior use it {inverseMouseWheel:true}

Example

jQuery('#timepicker4').TimePickerAlone({
inverseMouseWheel: false
});


listenKeyPress true When you click on some time's part(second,minutes etc) you can enter key(0-9) and this value will be choosen {listenKeyPress:true}

Example

jQuery('#timepicker5').TimePickerAlone({
listenKeyPress: false
});


saveOnChange true When you choose some time in picker in input field value will be updated too {saveOnChange:true}

Example

jQuery('#timepicker6').TimePickerAlone({
saveOnChange: false
});


onChange
function (str, datetime) {
	//console.log(str);
	//console.log(datetime);
}
Event is triggered when time is changed {onChange:alert}
onHide
function () {return true;}
Event is triggered when timepicker is closed. If it returns false the picker will not be closed

Example

jQuery('#timepicker7').TimePickerAlone({
	onHide: function ($input) {
		return $input.val() === '12:34:00';
	}
});


twelveHoursFormat true Use 12 am/pm hours format {twelveHoursFormat: false}

Example

jQuery('#timepicker8').TimePickerAlone({
twelveHoursFormat: false
});


inputFormat 'HH:mm:ss' Use 12 am/pm hours format {inputFormat:'H:m'}

Example

jQuery('#timepicker9').TimePickerAlone({
inputFormat: 'H:m'
});


defaultTime '00:00:00' Start time if in input field attribute "value" empty. In format inputFormat {defaultTime:'23:45'}

Example

jQuery('#timepicker11').TimePickerAlone({
defaultTime:'23:45'
});


hours true Show hours picker {hours:false}

Example

jQuery('#timepicker12').TimePickerAlone({
hours:false
});


minutes true Show minutes picker {minutes:false}

Example

jQuery('#timepicker13').TimePickerAlone({
minutes:false
});


seconds false Show seconds picker {seconds:true}

Example

jQuery('#timepicker14').TimePickerAlone({
seconds:true
});


ampm true Show am/pm picker. You can use it without twelveHoursFormat {ampm:false}

Example

jQuery('#timepicker15').TimePickerAlone({
ampm:false
});


steps [1,1,1,1] Steps for picker [hours,minutes,seconds,ampm] {steps:[2,2,2,1]}

Example

jQuery('#timepicker16').TimePickerAlone({
steps:[2,2,2,1]
});


inline false Inline mode

Example

jQuery('#timepicker_inline').TimePickerAlone({
inline:true
});


Methods

destroy

Returns the initial field to its original state

jQuery('#timepicker15').TimePickerAlone('destroy');

regenerate

When you change something on the page, you can recalc all picker's states

$(window).on('resize', function(){
	jQuery('#timepicker15').TimePickerAlone('regenerate');
});

save

Save current picker state in original input

jQuery('#timepicker15').TimePickerAlone('save');

setValue

Set timepicker value

jQuery('#timepicker15').TimePickerAlone('setValue', '12:00', true); // true - means no trigger change if used saveOnChange
jQuery('#timepicker16').TimePickerAlone('setValue', new Date());

getValue

get current Date object value

console.log(jQuery('#timepicker15').TimePickerAlone('getValue'));

setMax

set maxumum of time

jQuery('#timepicker15').TimePickerAlone('setMax', new Date()); // now will be upper limit
jQuery('#timepicker16').TimePickerAlone('setMax', '10:00'); 

setMin

set minimum of time

jQuery('#timepicker15').TimePickerAlone('setMin', new Date()); // now is the lower limit
jQuery('#timepicker16').TimePickerAlone('setMin', '12:00'); 

Buy a license

Use on unlimited websites with unlimited projects.
For further details please see the License Agreement. or Bug tracker



Basic

$3

  • Unlimited websites
  • Integrate with products for end users
  • Integrate with non-open source projects
  • One month updates
  • 30-Day Money Back Guarantee
  • No Support
  • Integration on unlimited websites
Developer's Choice

Professional

$7

  • Unlimited websites
  • Integrate with products for end users
  • Integrate with non-open source projects
  • Free updates forever
  • 30-Day Money Back Guarantee
  • Integration on unlimited websites
  • TimePicker
  • DateTimePicker
  • PeriodDateTimePicker
  • Less theme files
  • One year of support

OEM

$15

  • Unlimited websites
  • Integrate with projects for both end users and developers
  • Integrate with open source projects
  • Free updates forever
  • 30-Day Money Back Guarantee
  • Integration on unlimited websites
  • TimePicker
  • DateTimePicker
  • PeriodDateTimePicker
  • Less theme files
  • SASS(Scss) theme files
  • One year of support


For inquiries in regards of licensing, billing,
processing of your payments, etc, please, use chupurnov@gmail.com.


Buy a license

Use on unlimited websites with unlimited projects.
For further details please see the License Agreement. or Bug tracker



Developer's Choice

Professional

$7

  • Unlimited websites
  • Integrate with products for end users
  • Integrate with non-open source projects
  • Free updates forever
  • 30-Day Money Back Guarantee
  • Integration on unlimited websites
  • TimePicker
  • DateTimePicker
  • PeriodDateTimePicker
  • Less theme files
  • TypeScript sources
  • One year of support

OEM

$15

  • Unlimited websites
  • Integrate with projects for both end users and developers
  • Integrate with open source projects
  • Free updates forever
  • 30-Day Money Back Guarantee
  • Integration on unlimited websites
  • TimePicker
  • DateTimePicker
  • PeriodDateTimePicker
  • Less theme files
  • TypeScript sources
  • One year of support


For inquiries in regards of licensing, billing,
processing of your payments, etc, please, use chupurnov@gmail.com.


comments powered by Disqus