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

add page and day names style, modify day names render method

Browse Source
This commit is contained in:
t1m0n 2015-10-05 15:04:23 +03:00
parent 88a97bbb95
commit bf4a586628
8 changed files with 103 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
css/style.css
View File

@ -54,3 +54,17 @@ a {
textarea {
overflow: auto; }
/* -------------------------------------------------
Page styles
------------------------------------------------- */
html {
font-family: Tahoma, sans-serif;
font-size: 13px; }
.contents {
width: 960px;
margin: 0 auto;
padding: 1px 0; }
.contents article {
margin: 60px 0 30px; }

17
dist/css/datepicker.css vendored
View File

@ -0,0 +1,17 @@
/* -------------------------------------------------
Datepicker
------------------------------------------------- */
.datepicker {
border: 1px solid #dddddd;
width: 224px; }
.datepicker--days--names {
display: flex; }
.datepicker--days--name {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
text-align: center; }

12
dist/js/datepicker.js vendored
View File

@ -140,15 +140,17 @@ Datepicker.Cell = function () {
this.$cells = $('.datepicker--days--cells', this.$el);
},
_getDayNamesHtml: function (firstDay, curDay, html, circle) {
_getDayNamesHtml: function (firstDay, curDay, html, i) {
curDay = curDay != undefined ? curDay : firstDay;
html = html ? html : '';
if (curDay == firstDay && circle) return html;
if (curDay == 7) return this._getDayNamesHtml(firstDay, 0, html, true);
i = i != undefined ? i : 0;
html += '<div class="datepicker--days--name">' + this.d.loc.days[curDay] + '</div>';
if (i > 7) return html;
if (curDay == 7) return this._getDayNamesHtml(firstDay, 0, html, ++i);
return this._getDayNamesHtml(firstDay, ++curDay, html, circle);
html += '<div class="datepicker--days--name' + (i >= 5 ? " -weekend-" : "") + '">' + this.d.loc.days[curDay] + '</div>';
return this._getDayNamesHtml(firstDay, ++curDay, html, ++i);
},
_renderDays: function () {

8
index.html
View File

@ -8,9 +8,11 @@
<script type="text/javascript" src="vendor/jquery/dist/jquery.min.js"></script>
</head>
<body>
<div class="calendar"></div>
<div class="contents">
<article>
<div class="calendar"></div>
</article>
</div>
<script type="text/javascript" src="dist/js/datepicker.js"></script>
<script type="text/javascript">
$('.calendar').datepicker();

12
js/datepicker/body.js
View File

@ -28,15 +28,17 @@
this.$cells = $('.datepicker--days--cells', this.$el);
},
_getDayNamesHtml: function (firstDay, curDay, html, circle) {
_getDayNamesHtml: function (firstDay, curDay, html, i) {
curDay = curDay != undefined ? curDay : firstDay;
html = html ? html : '';
if (curDay == firstDay && circle) return html;
if (curDay == 7) return this._getDayNamesHtml(firstDay, 0, html, true);
i = i != undefined ? i : 0;
html += '<div class="datepicker--days--name">' + this.d.loc.days[curDay] + '</div>';
if (i > 7) return html;
if (curDay == 7) return this._getDayNamesHtml(firstDay, 0, html, ++i);
return this._getDayNamesHtml(firstDay, ++curDay, html, circle);
html += '<div class="datepicker--days--name' + (i >= 5 ? " -weekend-" : "") + '">' + this.d.loc.days[curDay] + '</div>';
return this._getDayNamesHtml(firstDay, ++curDay, html, ++i);
},
_renderDays: function () {

19
sass/_page.scss
View File

@ -0,0 +1,19 @@
/* -------------------------------------------------
Page styles
------------------------------------------------- */
html {
font-family: Tahoma, sans-serif;
font-size: 13px;
}
.contents {
width: 960px;
margin: 0 auto;
padding: 1px 0;
article {
margin: 60px 0 30px;
}
}

31
sass/datepicker/_datepicker.scss
View File

@ -0,0 +1,31 @@
@import "datepicker-config";
/* -------------------------------------------------
Datepicker
------------------------------------------------- */
.datepicker {
border: 1px solid #dddddd;
width: $width;
}
// Days
// -------------------------------------------------
.datepicker--days {}
// Day names
// -------------------------
.datepicker--days--names {
display: flex;
}
.datepicker--days--name {
display: flex;
align-items: center;
justify-content: center;
width: $cellSize;
height: $cellSize;
text-align: center;
}

3
sass/datepicker/datepicker-config.scss Normal file
View File

@ -0,0 +1,3 @@
$cellSize: 32px;
$width: 7 * $cellSize;