jingrow/air-datepicker
1
0
Fork 0
mirror of https://github.com/frappe/air-datepicker.git synced 2026-01-14 11:01:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

begin work with input node

Browse Source
This commit is contained in:
t1m0n 2015-11-14 14:21:46 +03:00
parent 3d3046467b
commit cce9a64017
5 changed files with 243 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
dist/css/datepicker.css vendored
View File

@ -11,11 +11,21 @@
/* -------------------------------------------------
Datepicker
------------------------------------------------- */
.datepickers-container {
position: absolute;
left: 0;
top: 0; }
.datepicker {
border: 1px solid #ddd;
border-radius: 2px;
box-sizing: content-box;
width: 224px; }
width: 224px;
position: absolute;
left: -100000px;
opacity: 0; }
.datepicker.active {
opacity: 1; }
.datepicker--content {
padding: 2px; }

122
dist/js/datepicker.js vendored
View File

@ -10,13 +10,14 @@ var Datepicker;
'</div>',
defaults = {
//TODO сделать работу с инпутом
inline: true,
inline: false,
language: 'ru',
startDate: new Date(),
firstDay: '',
weekends: [6, 0],
dateFormat: '',
toggleSelected: true,
position: 'bottom left',
view: 'days',
minView: 'days',
@ -39,6 +40,8 @@ var Datepicker;
todayButton: false,
clearButton: false,
showEvent: 'focus',
// navigation
prevHtml: '&laquo;',
nextHtml: '&raquo;',
@ -49,22 +52,29 @@ var Datepicker;
};
Datepicker = function (el, options) {
this.$el = typeof el == 'string' ? $(el) : el;
this.el = el;
this.$el = $(el);
this.opts = $.extend({}, defaults, options);
if (!this.opts.startDate) {
this.opts.startDate = new Date();
}
if (this.containerBuilt && !this.opts.inline) {
this._buildDatepickersContainer();
}
if ($body == undefined) {
$body = $('body');
}
if (!this.opts.startDate) {
this.opts.startDate = new Date();
}
if (this.el.nodeName == 'INPUT') {
this.elIsInput = true;
}
if (!this.containerBuilt && !this.opts.inline && this.elIsInput) {
this._buildDatepickersContainer();
}
this.inited = false;
this.visible = false;
this.silent = false; // Need to prevent unnecessary rendering
this.currentDate = this.opts.startDate;
@ -86,6 +96,12 @@ var Datepicker;
this._buildBaseHtml();
this._defineLocale(this.opts.language);
if (this.elIsInput) {
if (!this.opts.inline) {
this._bindEvents()
}
}
this.views[this.currentView] = new Datepicker.Body(this, this.currentView, this.opts);
this.views[this.currentView].show();
this.nav = new Datepicker.Navigation(this, this.opts);
@ -94,6 +110,13 @@ var Datepicker;
this.inited = true;
},
_bindEvents : function () {
this.$el.on(this.opts.showEvent, this._onShowEvent.bind(this));
this.$datepicker.on('mousedown', this._onMouseDownDatepicker.bind(this));
this.$datepicker.on('mouseup', this._onMouseUpDatepicker.bind(this));
$body.on('mousedown.datepicker', this._onMouseDownBody.bind(this));
},
isWeekend: function (day) {
return this.opts.weekends.indexOf(day) !== -1;
},
@ -126,8 +149,13 @@ var Datepicker;
_buildBaseHtml: function () {
var $appendTarget = this.$el;
if(!this.opts.inline) {
$appendTarget = $datepickersContainer;
if(this.el.nodeName == 'INPUT') {
if (!this.opts.inline) {
$appendTarget = $datepickersContainer;
} else {
}
}
this.$datepicker = $(baseTemplate).appendTo($appendTarget);
this.$content = $('.datepicker--content', this.$datepicker);
@ -145,7 +173,7 @@ var Datepicker;
var selectedDates = this.selectedDates,
parsedSelected = Datepicker.getParsedDate(selectedDates[0]),
formattedDates = this.formatDate(this.opts.dateFormat, selectedDates[0]),
formattedDates = this.formatDate(this.loc.dateFormat, selectedDates[0]),
_this = this,
dates = new Date(parsedSelected.year, parsedSelected.month, parsedSelected.date);
@ -315,6 +343,74 @@ var Datepicker;
return type ? types[type] : types.day
},
_getDimensions: function () {
var offset = this.$el.offset();
return {
width: this.$el.outerWidth(),
height: this.$el.outerHeight(),
left: offset.left,
top: offset.top
}
},
setPosition: function (position) {
var dims = this._getDimensions(),
pos = position.split(' '),
top, left,
offset = 6,
main = pos[0],
secondary = pos[1];
switch (main) {
case 'bottom':
top = dims.top + dims.height + offset;
break;
}
switch(secondary) {
case 'left':
left = dims.left
}
this.$datepicker.css({
left: left,
top: top
})
},
show: function () {
this.$datepicker.addClass('active');
this.setPosition(this.opts.position);
this.visible = true;
},
hide: function () {
this.$datepicker.removeClass('active');
this.visible = false;
},
_onShowEvent: function () {
if (!this.visible) {
this.show();
}
},
_onMouseDownBody: function (e) {
if (!this.inFocus) {
this.hide();
}
},
_onMouseDownDatepicker: function (e) {
this.inFocus = true;
},
_onMouseUpDatepicker: function (e) {
this.inFocus = false;
this.$el.focus()
},
get parsedDate() {
return Datepicker.getParsedDate(this.date);
},
@ -451,7 +547,7 @@ var Datepicker;
}
};
})(window, jQuery, '');
})(window, jQuery);
;(function () {
var template = '' +
'<div class="datepicker--nav-action" data-action="prev">#{prevHtml}</div>' +

2
index.html
View File

@ -10,7 +10,7 @@
<body>
<div class="contents">
<article>
<div class="calendar"></div>
<input class="calendar" type="text"/>
</article>
</div>
<script type="text/javascript" src="dist/js/datepicker.js"></script>

122
js/datepicker/datepicker.js
View File

@ -10,13 +10,14 @@ var Datepicker;
'</div>',
defaults = {
//TODO сделать работу с инпутом
inline: true,
inline: false,
language: 'ru',
startDate: new Date(),
firstDay: '',
weekends: [6, 0],
dateFormat: '',
toggleSelected: true,
position: 'bottom left',
view: 'days',
minView: 'days',
@ -39,6 +40,8 @@ var Datepicker;
todayButton: false,
clearButton: false,
showEvent: 'focus',
// navigation
prevHtml: '&laquo;',
nextHtml: '&raquo;',
@ -49,22 +52,29 @@ var Datepicker;
};
Datepicker = function (el, options) {
this.$el = typeof el == 'string' ? $(el) : el;
this.el = el;
this.$el = $(el);
this.opts = $.extend({}, defaults, options);
if (!this.opts.startDate) {
this.opts.startDate = new Date();
}
if (this.containerBuilt && !this.opts.inline) {
this._buildDatepickersContainer();
}
if ($body == undefined) {
$body = $('body');
}
if (!this.opts.startDate) {
this.opts.startDate = new Date();
}
if (this.el.nodeName == 'INPUT') {
this.elIsInput = true;
}
if (!this.containerBuilt && !this.opts.inline && this.elIsInput) {
this._buildDatepickersContainer();
}
this.inited = false;
this.visible = false;
this.silent = false; // Need to prevent unnecessary rendering
this.currentDate = this.opts.startDate;
@ -86,6 +96,12 @@ var Datepicker;
this._buildBaseHtml();
this._defineLocale(this.opts.language);
if (this.elIsInput) {
if (!this.opts.inline) {
this._bindEvents()
}
}
this.views[this.currentView] = new Datepicker.Body(this, this.currentView, this.opts);
this.views[this.currentView].show();
this.nav = new Datepicker.Navigation(this, this.opts);
@ -94,6 +110,13 @@ var Datepicker;
this.inited = true;
},
_bindEvents : function () {
this.$el.on(this.opts.showEvent, this._onShowEvent.bind(this));
this.$datepicker.on('mousedown', this._onMouseDownDatepicker.bind(this));
this.$datepicker.on('mouseup', this._onMouseUpDatepicker.bind(this));
$body.on('mousedown.datepicker', this._onMouseDownBody.bind(this));
},
isWeekend: function (day) {
return this.opts.weekends.indexOf(day) !== -1;
},
@ -126,8 +149,13 @@ var Datepicker;
_buildBaseHtml: function () {
var $appendTarget = this.$el;
if(!this.opts.inline) {
$appendTarget = $datepickersContainer;
if(this.el.nodeName == 'INPUT') {
if (!this.opts.inline) {
$appendTarget = $datepickersContainer;
} else {
}
}
this.$datepicker = $(baseTemplate).appendTo($appendTarget);
this.$content = $('.datepicker--content', this.$datepicker);
@ -145,7 +173,7 @@ var Datepicker;
var selectedDates = this.selectedDates,
parsedSelected = Datepicker.getParsedDate(selectedDates[0]),
formattedDates = this.formatDate(this.opts.dateFormat, selectedDates[0]),
formattedDates = this.formatDate(this.loc.dateFormat, selectedDates[0]),
_this = this,
dates = new Date(parsedSelected.year, parsedSelected.month, parsedSelected.date);
@ -315,6 +343,74 @@ var Datepicker;
return type ? types[type] : types.day
},
_getDimensions: function () {
var offset = this.$el.offset();
return {
width: this.$el.outerWidth(),
height: this.$el.outerHeight(),
left: offset.left,
top: offset.top
}
},
setPosition: function (position) {
var dims = this._getDimensions(),
pos = position.split(' '),
top, left,
offset = 6,
main = pos[0],
secondary = pos[1];
switch (main) {
case 'bottom':
top = dims.top + dims.height + offset;
break;
}
switch(secondary) {
case 'left':
left = dims.left
}
this.$datepicker.css({
left: left,
top: top
})
},
show: function () {
this.$datepicker.addClass('active');
this.setPosition(this.opts.position);
this.visible = true;
},
hide: function () {
this.$datepicker.removeClass('active');
this.visible = false;
},
_onShowEvent: function () {
if (!this.visible) {
this.show();
}
},
_onMouseDownBody: function (e) {
if (!this.inFocus) {
this.hide();
}
},
_onMouseDownDatepicker: function (e) {
this.inFocus = true;
},
_onMouseUpDatepicker: function (e) {
this.inFocus = false;
this.$el.focus()
},
get parsedDate() {
return Datepicker.getParsedDate(this.date);
},
@ -451,4 +547,4 @@ var Datepicker;
}
};
})(window, jQuery, '');
})(window, jQuery);

13
sass/datepicker/_datepicker.scss
View File

@ -4,11 +4,24 @@
Datepicker
------------------------------------------------- */
.datepickers-container {
position: absolute;
left: 0;
top: 0;
}
.datepicker {
border: 1px solid $colorGrey;
border-radius: $datepickerBorderRadius;
box-sizing: content-box;
width: $datepickerWidth;
position: absolute;
left: -100000px;
opacity: 0;
&.active {
opacity: 1;
}
}
.datepicker--content {