persiandate-picker
Version:
Jalali Calendar Date picker
520 lines (456 loc) • 17.6 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Source: datepicker.js</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<div id="main">
<h1 class="page-title">Source: datepicker.js</h1>
<section>
<article>
<pre class="prettyprint source"><code>/**
* @class ClassDatepicker
* @type {{_pickers: {}, _getNextState: _getNextState, _checkNextStateAvalibility: _checkNextStateAvalibility, changeView: changeView, _flagSelfManipulate: boolean, selectTime: selectTime, selectDate: selectDate, selectMonth: selectMonth, selectYear: selectYear, _formatDigit: _formatDigit, destroy: destroy, _syncWithImportData: _syncWithImportData, _attachEvents: _attachEvents, _updateInputElement: _updateInputElement, _defineOnInitState: _defineOnInitState, events: {}, _viewed: boolean, init: init}}
*/
var ClassDatepicker = {
/**
*
* @desc list of picker obejcts like dayPicker,monthPicker,yearPicker
* @private
*/
_pickers: {},
/**
* @desc save current visibility state of plugin
* @private
*/
_viewed: false,
/**
* @desc if plugin selector detect as a div or any element exsept inpout set as true
* @private
*/
_inlineView: false,
/**
* @desc define next state of {@link ClassDatepicker._pickers}
* @param {string} action . Acceptable Value : 'day','month',year
* @returns {*}
* @private
*/
_getNextState: function (action) {
var currentState = this.currentView;
var nextState = this.currentView;
if (action === 'next') {
if (currentState === 'month' && this.dayPicker) {
nextState = 'day';
}
if (currentState === 'year') {
if (this.monthPicker) {
nextState = 'month';
} else {
if (this.dayPicker) {
nextState = 'day';
}
}
}
}
else if (action === 'prev') {
if (currentState === 'month' && this.yearPicker) {
nextState = 'year';
}
if (currentState === 'day') {
if (this.monthPicker) {
nextState = 'month';
} else {
if (this.yearPicker) {
nextState = 'year';
}
}
}
}
return this._checkNextStateAvalibility(nextState);
},
/**
* @desc check next state is available in {@link ClassDatepicker._pickers}
* @param {string} state Accepptable Value: 'day','month','year'
* @returns {*}
* @private
*/
_checkNextStateAvalibility: function (state) {
if (!this._pickers[state]) {
this.element.main.hide();
return false;
$.error(state + "Picker Set as {enabled:false} and dos not exist!! Set viewMode to Enabled view Check Configuration");
}
return state;
},
/**
* @desc update {@link ClassNavigator} object switch text
* @param switchStr
* @public
* @returns {ClassDatepicker}
*/
updateNavigator: function (switchStr) {
if (this.navigator) {
this.navigator.updateSwitchBtn(this._formatDigit(switchStr));
}
return this;
},
/**
* @desc update {@link ClassNavigator} relaion state
* @param switchStr
* @public
* @returns {ClassDatepicker}
*/
switchNavigatorRelation: function (newState) {
if (this.navigator) {
this.navigator.switchRelation(newState);
}
return this;
},
/**
* @desc change {@link _pickers} visibility
* @param state
* @param action
* @returns {ClassDatepicker}
*/
changeView: function (state, action) {
var self = this;
var newState;
if (!action) {
newState = this._checkNextStateAvalibility(state);
} else {
newState = this._getNextState(action);
}
if (newState) {
self.publishInDic(self._pickers, 'hide');
self._pickers[newState].show();
self.switchNavigatorRelation(newState);
self.currentView = newState;
}
return this;
},
/**
* @desc used in {@link ClassDatepicker._attachEvents}
* @private
*/
_flagSelfManipulate: true,
/**
* @desc only called by {@link ClassTimepicker}
* @param key
* @param val
* @event
*/
selectTime: function (key, val) {
this.state.setTime(key, val);
this._updateInputElement();
this.onSelect(key, this);
},
/**
* @desc only called by {@link ClassDaypicker}
* @param key
* @param unixDate
* @returns {ClassDatepicker}
* @event
*/
selectDate: function (unixDate) {
var self = this;
self.state.setSelected('unix', unixDate);
this.state.syncViewWithelected();
switch (self.currentView) {
case ('month'):
self.monthPicker.selectMonth();
break;
case ('year'):
self.yearPicker.selectYear();
break;
case ('day'):
self.dayPicker.selectDay();
break;
}
self._updateInputElement();
self.onSelect(unixDate, this);
if (self.autoClose) {
self.element.main.hide();
}
return this;
},
/**
* @desc only called by {@link ClassDaypicker}
* @param key
* @param unixDate
* @returns {ClassDatepicker}
* @event
*/
selectDateTime: function (unixDate) {
var self = this;
self.state.setSelectedDateTime('unix', unixDate);
this.state.syncViewWithelected();
switch (self.currentView) {
case ('month'):
self.monthPicker.selectMonth();
break
case ('year'):
self.yearPicker.selectYear();
break
case ('day'):
self.dayPicker.selectDay();
break
}
self._updateInputElement();
self.onSelect(unixDate, this);
if (self.autoClose) {
self.element.main.hide();
}
return this;
},
/**
* @desc only called by {@link ClassMonthPicker}
* @param monthNum
* @returns {ClassDatepicker}
*/
selectMonth: function (monthNum) {
var self = this;
if (this.justSelectOnDate) {
self.state.setView('month', monthNum);
} else {
self.state.setSelected('month', monthNum);
self.state.setSelected('year', self.state.view.year);
self.state.syncViewWithelected();
}
self._updateInputElement();
self.changeView(self.currentView, 'next');
return this;
},
/**
* @desc only called by {@link ClassYearPicker}
* @param yearNum
* @returns {ClassDatepicker}
*/
selectYear: function (yearNum) {
var self = this;
if (this.justSelectOnDate) {
self.state.setView('year', yearNum);
} else {
self.state.setSelected('year', yearNum);
self.state.syncViewWithelected();
}
self._updateInputElement();
self.changeView(self.currentView, 'next');
return this;
},
/**
* @desc check {@link ClassDatepicker.persianDigit} and if set true all digit convert to persian
* @param digit
* @returns {*}
* @private
*/
_formatDigit: function (digit) {
if (this.persianDigit && digit) {
return digit.toString().toPersianDigit();
}
else {
return digit;
}
},
/**
* @desc use in {@link ClassDatepicker._attachEvents}
* @param pasted
* @returns {ClassDatepicker}
* @private
*/
_syncWithImportData: function (pasted) {
if (pasted) {
var self = this;
if (jQuery.isNumeric(pasted)) {
var newPersainDate = new persianDate(pasted);
self.state.setSelected('unix', newPersainDate);
self._updateInputElement();
} else {
var persianDateArray = self.validatePersianDateString(pasted);
if (persianDateArray != null) {
delay(function () {
var newPersainDate = new persianDate(persianDateArray);
self.selectDate(newPersainDate.valueOf());
}, self.inputDelay)
}
}
}
return this;
},
/**
* @desc Attach all dom events to rendered element.
* @returns {ClassDatepicker}
* @private
*/
_attachEvents: function () {
var self = this;
$(window).resize(function () {
self.view.fixPosition(self);
});
if (self.observer) {
///////////////// Manipulate by Copy And paste
self.inputElem.bind('paste', function (e) {
delay(function () {
self._syncWithImportData(e.target.value);
}, 60);
});
///////////////// Manipulate by alt changes
$(self.altField).bind("change", function () {
if (!self._flagSelfManipulate) {
var newDate = new Date($(this).val());
if (newDate !== "Invalid Date") {
var newPersainDate = new persianDate(newDate);
self.selectDate(newPersainDate.valueOf());
}
}
});
///////////////// Manipulate by keyboard
var ctrlDown = false;
var ctrlKey = [17, 91], vKey = 86, cKey = 67;
$(document).keydown(function (e) {
if ($.inArray(e.keyCode, ctrlKey) > 0)
ctrlDown = true;
}).keyup(function (e) {
if ($.inArray(e.keyCode, ctrlKey) > 0)
ctrlDown = false;
});
self.inputElem.bind("keyup", function (e) {
var $self = $(this);
if (!self._flagSelfManipulate) {
var trueKey = false;
if (e.keyCode === 8 || e.keyCode < 105 && e.keyCode > 96 || e.keyCode < 58 && e.keyCode > 47 || (ctrlDown && (e.keyCode == vKey || $.inArray(e.keyCode, ctrlKey) > 0 ))) {
trueKey = true;
}
if (trueKey) {
self._syncWithImportData($self.val());
}
}
});
}
self.inputElem.focus(function () {
self.show();
});
self.inputElem.click(function (e) {
e.stopPropagation();
return false;
});
self.inputElem.blur(function () {
if (!$.browser.msie) {
self.hide();
}
});
$(document).not(".datepicker-plot-area,.datepicker-plot-area > *").click(function (e) {
self.inputElem.blur();
self.hide();
});
$(self.element.main).mousedown(function (e) {
e.stopPropagation();
return false;
});
return this;
},
/**
* @desc update input and altField input elemet value
* @returns {ClassDatepicker}
* @private
*/
_updateInputElement: function () {
var self = this;
self._flagSelfManipulate = true;
// Update Alt Field
self.altField.val(self.altFieldFormatter(self.state.selected.unixDate)).trigger('change');
;
// Update Display Field
self.inputElem.val(self.formatter(self.state.selected.unixDate)).trigger('change');
;
self._flagSelfManipulate = false;
return self;
},
/**
* @desc bootstrap method of {@link ClassDatepicker}
* @returns {ClassDatepicker}
* @private
*/
_defineOnInitState: function () {
if ($(this.$container)[0].nodeName == 'INPUT') {
var garegurianDate = new Date(this.inputElem.val()).valueOf();
this.$container = $('body');
}
else {
var garegurianDate = new Date($(this.$container).data('date')).valueOf();
this._inlineView = true;
}
if (garegurianDate && garegurianDate != 'undefined') {
this.state.unixDate = garegurianDate;
}
else {
this.state.unixDate = new Date().valueOf();
}
this.altField = $(this.altField);
this.state.setSelectedDateTime('unix', this.state.unixDate);
this.state.setTime('unix', this.state.unixDate);
this.state.setView('unix', this.state.unixDate);
return this;
},
/**
* @desc set time of timepicker
*/
setTime: function () {
this.timePicker.setTime(this.state.selected.unixDate);
},
/**
* @desc set date of datepicker
*/
setDate: function (p) {
var date = new persianDate(p);
this.selectDateTime(date.valueOf());
if (this.timePicker.enabled)
this.setTime();
return this;
},
/**
* @desc initilize {@link ClassDatepicker}
* @returns {ClassDatepicker}
*/
init: function () {
var self = this;
this.state = new State({datepicker: self});
this.compatConfig();
this._defineOnInitState();
this._updateInputElement();
this.view = this.views['default'];
this.view.render(this);
this.inputElem.data("datepicker", this);
this.inputElem.addClass(self.cssClass);
this._attachEvents();
return this;
}
};
var Datepicker = function (mainElem, options) {
return inherit(this, [ClassSprite, ClassCompat, ClassDatepicker, ViewsDatePicker, ClassConfig, options, {
$container: mainElem,
inputElem: $(mainElem)
}]);
};
</code></pre>
</article>
</section>
</div>
<nav>
<h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="ClassBase.html">ClassBase</a></li><li><a href="ClassDatepicker.html">ClassDatepicker</a></li><li><a href="ClassDatepicker.ClassCompat.html">ClassCompat</a></li><li><a href="ClassDatepicker.ClassConfig.html">ClassConfig</a></li><li><a href="ClassDatepicker.ViewsDatePicker.html">ViewsDatePicker</a></li><li><a href="ClassDatepickerState.html">ClassDatepickerState</a></li><li><a href="ClassDayPicker.html">ClassDayPicker</a></li><li><a href="ClassDayPicker.ClassMonthGrid.html">ClassMonthGrid</a></li><li><a href="ClassMonthGrid.ViewsMonthGrid.html">ViewsMonthGrid</a></li><li><a href="ClassMonthPicker.html">ClassMonthPicker</a></li><li><a href="ClassNavigator.html">ClassNavigator</a></li><li><a href="ClassSprite.html">ClassSprite</a></li><li><a href="ClassTimePicker.html">ClassTimePicker</a></li><li><a href="ClassToolbox.html">ClassToolbox</a></li><li><a href="ClassYearPicker.html">ClassYearPicker</a></li><li><a href="TEMPLATE.html">TEMPLATE</a></li></ul><h3>Events</h3><ul><li><a href="ClassDatepicker.ClassConfig.html#.event:onHide">onHide</a></li><li><a href="ClassDatepicker.ClassConfig.html#.event:onSelect">onSelect</a></li><li><a href="ClassDatepicker.ClassConfig.html#.event:onShow">onShow</a></li><li><a href="ClassDatepicker.ClassConfig.html#.navigator#.event:onNext">onNext</a></li><li><a href="ClassDatepicker.ClassConfig.html#.navigator#.event:onPrev">onPrev</a></li><li><a href="ClassDatepicker.ClassConfig.html#.navigator#.event:onSwitch">onSwitch</a></li><li><a href="ClassDatepicker.html#.event:selectDate">selectDate</a></li><li><a href="ClassDatepicker.html#.event:selectDateTime">selectDateTime</a></li><li><a href="ClassDatepicker.html#.event:selectTime">selectTime</a></li></ul><h3>Global</h3><ul><li><a href="global.html#ClassDateRange">ClassDateRange</a></li><li><a href="global.html#delay">delay</a></li><li><a href="global.html#inherit">inherit</a></li><li><a href="global.html#log">log</a></li><li><a href="global.html#range">range</a></li></ul>
</nav>
<br clear="both">
<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.0</a> on Sun Aug 07 2016 12:06:04 GMT+0430 (Iran Daylight Time)
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>