Fancy Datepicker
This commit is contained in:
Miroslav Šedivý
parent
11b2ce0087
commit
44c7a818e8
6 changed files with 311 additions and 45 deletions
|
|
@ -25,9 +25,20 @@ At = "Hier"
|
|||
Where are you? = "Wo bist du?"
|
||||
Save = "Speichern"
|
||||
|
||||
Year: = "Jahr:"
|
||||
Month: = "Monat:"
|
||||
Day: = "Tag:"
|
||||
January = "Januar"
|
||||
February = "Februar"
|
||||
March = "März"
|
||||
April = "April"
|
||||
May = "Mai"
|
||||
June = "Juni"
|
||||
July = "Juli"
|
||||
August = "August"
|
||||
September = "September"
|
||||
October = "Oktober"
|
||||
November = "November"
|
||||
December = "Dezember"
|
||||
|
||||
Time: = "Zeit:"
|
||||
Hour: = "Stunde:"
|
||||
Minute: = "Minute:"
|
||||
|
||||
|
|
|
|||
|
|
@ -25,9 +25,20 @@ At = "At"
|
|||
Where are you? = "Where are you?"
|
||||
Save = "Save"
|
||||
|
||||
Year: = "Year:"
|
||||
Month: = "Month:"
|
||||
Day: = "Day:"
|
||||
January = "January"
|
||||
February = "February"
|
||||
March = "March"
|
||||
April = "April"
|
||||
May = "May"
|
||||
June = "June"
|
||||
July = "July"
|
||||
August = "August"
|
||||
September = "September"
|
||||
October = "October"
|
||||
November = "November"
|
||||
December = "December"
|
||||
|
||||
Time: = "Time:"
|
||||
Hour: = "Hour:"
|
||||
Minute: = "Minute:"
|
||||
|
||||
|
|
|
|||
71
index.php
71
index.php
|
|
@ -14,29 +14,13 @@ if(empty($_SESSION['token'])){
|
|||
|
||||
Log::put("visitors");
|
||||
|
||||
$year = intval(date("Y"));
|
||||
$years = '';
|
||||
for($y=$year-5;$y<=$year+5;$y++){
|
||||
$years .= sprintf('<option>%d</option>', $y);
|
||||
}
|
||||
|
||||
$months = '';
|
||||
for($m=1;$m<=12;$m++){
|
||||
$months .= sprintf('<option value="%d">%02d</option>', $m, $m);
|
||||
}
|
||||
|
||||
$days = '';
|
||||
for($d=1;$d<=31;$d++){
|
||||
$days .= sprintf('<option value="%d">%02d</option>', $d, $d);
|
||||
}
|
||||
|
||||
$hours = '';
|
||||
for($h=0;$h<=24;$h++){
|
||||
$hours .= sprintf('<option value="%d">%02d</option>', $h, $h);
|
||||
}
|
||||
|
||||
$minutes = '';
|
||||
for($m=0;$m<=60;$m+=10){
|
||||
for($m=0;$m<60;$m+=10){
|
||||
$minutes .= sprintf('<option value="%d">%02d</option>', $m, $m);
|
||||
}
|
||||
|
||||
|
|
@ -213,33 +197,43 @@ if(!empty($scripts)){
|
|||
|
||||
<!-- Edit Date Modal -->
|
||||
<div class="modal edit_date_modal">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-dialog small">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<a class="close"></a>
|
||||
<h4 class="modal-title"><?php echo __("Change Date"); ?></h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<select class="year">
|
||||
<option value="" disabled="1"><?php echo __("Year:"); ?></option>
|
||||
<?php echo $years; ?>
|
||||
</select>
|
||||
<select class="month">
|
||||
<option value="" disabled="1"><?php echo __("Month:"); ?></option>
|
||||
<?php echo $months; ?>
|
||||
</select>
|
||||
<select class="day">
|
||||
<option value="" disabled="1"><?php echo __("Day:"); ?></option>
|
||||
<?php echo $days; ?>
|
||||
</select>
|
||||
<select class="hour">
|
||||
<option value="" disabled="1"><?php echo __("Hour:"); ?></option>
|
||||
<?php echo $hours; ?>
|
||||
</select>
|
||||
<select class="minute">
|
||||
<option value="" disabled="1"><?php echo __("Minute:"); ?></option>
|
||||
<?php echo $minutes; ?>
|
||||
</select>
|
||||
<div class="datepicker">
|
||||
<input type="hidden" class="year" value="">
|
||||
<input type="hidden" class="month" value="">
|
||||
<input type="hidden" class="day" value="">
|
||||
<input type="hidden" class="month_names" value="<?php echo
|
||||
__("January").",".
|
||||
__("February").",".
|
||||
__("March").",".
|
||||
__("April").",".
|
||||
__("May").",".
|
||||
__("June").",".
|
||||
__("July").",".
|
||||
__("August").",".
|
||||
__("September").",".
|
||||
__("October").",".
|
||||
__("November").",".
|
||||
__("December");
|
||||
?>">
|
||||
</div>
|
||||
<div style="text-align: center;">
|
||||
<?php echo __("Time:"); ?>
|
||||
<select class="hour">
|
||||
<option value="" disabled="1"><?php echo __("Hour:"); ?></option>
|
||||
<?php echo $hours; ?>
|
||||
</select> :
|
||||
<select class="minute">
|
||||
<option value="" disabled="1"><?php echo __("Minute:"); ?></option>
|
||||
<?php echo $minutes; ?>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="buttons">
|
||||
|
|
@ -329,6 +323,7 @@ if(!empty($scripts)){
|
|||
<script>$["\x61\x6A\x61\x78\x53\x65\x74\x75\x70"]({"\x68\x65\x61\x64\x65\x72\x73":{"\x43\x73\x72\x66-\x54\x6F\x6B\x65\x6E":"<?php echo $_SESSION['token'];?>"}});</script>
|
||||
|
||||
<script src="static/scripts/lightbox.js"></script>
|
||||
<script src="static/scripts/datepick.js"></script>
|
||||
<script src="static/scripts/autosize.js"></script>
|
||||
<?php echo Config::get("highlight") ? '<script src="static/scripts/highlight.js"></script><script>hljs.initHighlightingOnLoad();</script>' : ''; ?>
|
||||
<script src="static/scripts/app.js?v=<?php echo Config::get("version"); ?>"></script>
|
||||
|
|
|
|||
|
|
@ -849,6 +849,9 @@ $.fn.apply_post = function(){
|
|||
modal.find(".hour").val(data[3]);
|
||||
modal.find(".minute").val(data[4]);
|
||||
|
||||
// Initialize datepick
|
||||
datepick(modal.find(".datepicker"));
|
||||
|
||||
// On close
|
||||
modal.find(".close").click(function(){
|
||||
modal.close();
|
||||
|
|
|
|||
190
static/scripts/datepick.js
Normal file
190
static/scripts/datepick.js
Normal file
|
|
@ -0,0 +1,190 @@
|
|||
var datepick = function(container) {
|
||||
var datepick = {
|
||||
months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
|
||||
|
||||
tbody: null,
|
||||
|
||||
m: null,
|
||||
daysInMonth: null,
|
||||
inc_m: function() {
|
||||
if(this.m == 11) {
|
||||
this.inc_y();
|
||||
this.m = 0;
|
||||
} else {
|
||||
this.m++;
|
||||
}
|
||||
|
||||
this.daysInMonth = (new Date(this.y, this.m+1, 0)).getDate();
|
||||
},
|
||||
|
||||
dec_m: function() {
|
||||
if(this.m == 0) {
|
||||
this.dec_y();
|
||||
this.m = 11;
|
||||
} else {
|
||||
this.m--;
|
||||
}
|
||||
|
||||
this.daysInMonth = (new Date(this.y, this.m+1, 0)).getDate();
|
||||
},
|
||||
|
||||
y: null,
|
||||
inc_y: function() {
|
||||
this.y++;
|
||||
},
|
||||
|
||||
dec_y: function() {
|
||||
this.y--;
|
||||
},
|
||||
|
||||
set_date: function(m, y) {
|
||||
this.m = m;
|
||||
this.y = y;
|
||||
|
||||
this.daysInMonth = (new Date(this.y, this.m+1, 0)).getDate();
|
||||
},
|
||||
|
||||
build_table: function(container) {
|
||||
var table = $("<table>");
|
||||
|
||||
// Thead
|
||||
var thead = $(
|
||||
'<thead>' +
|
||||
'<tr>' +
|
||||
'<th><button type="button" class="button blue prev" title="Previous Month"><</button></th>' +
|
||||
'<th class="month-pick" colspan="5" title="Select Month">'+this.months[this.m]+' '+this.y+'</th>' +
|
||||
'<th><button type="button" class="button blue next" title="Next Month">></button></th>' +
|
||||
'</tr>' +
|
||||
'<tr>' +
|
||||
'<th>Mo</th>' +
|
||||
'<th>Tu</th>' +
|
||||
'<th>We</th>' +
|
||||
'<th>Th</th>' +
|
||||
'<th>Fr</th>' +
|
||||
'<th>Sa</th>' +
|
||||
'<th>Su</th>' +
|
||||
'</tr>' +
|
||||
'</thead>'
|
||||
);
|
||||
|
||||
var x = this;
|
||||
$(thead).find(".prev").click(function(){
|
||||
x.dec_m();
|
||||
x.load_table();
|
||||
$(thead).find(".month-pick").text(x.months[x.m]+' '+x.y);
|
||||
});
|
||||
|
||||
$(thead).find(".next").click(function(){
|
||||
x.inc_m();
|
||||
x.load_table();
|
||||
$(thead).find(".month-pick").text(x.months[x.m]+' '+x.y);
|
||||
});
|
||||
|
||||
$(thead).find(".month-pick").click(function(){
|
||||
|
||||
});
|
||||
|
||||
$(table).append(thead);
|
||||
|
||||
// Tbody
|
||||
this.tbody = $("<tbody>");
|
||||
$(table).append(this.tbody);
|
||||
|
||||
$(container).append(table);
|
||||
},
|
||||
|
||||
load_table: function() {
|
||||
$(this.tbody).empty();
|
||||
|
||||
// Get first day of week
|
||||
var dayOfWeek = new Date(this.y, this.m, 1).getDay();
|
||||
|
||||
// Previous month
|
||||
this.dec_m();
|
||||
|
||||
var daysInPrevMonth = this.daysInMonth - dayOfWeek + 2;
|
||||
for (var i = dayOfWeek, j = daysInPrevMonth; i > 1; i--, j++) {
|
||||
this.append_date(j, false);
|
||||
}
|
||||
|
||||
// Current month
|
||||
this.inc_m();
|
||||
for (var i = 1; i <= this.daysInMonth; i++) {
|
||||
this.append_date(i, true);
|
||||
}
|
||||
|
||||
// Next month
|
||||
this.inc_m();
|
||||
i = 1;
|
||||
while (this.i % 7 != 0) {
|
||||
this.append_date(i++, false);
|
||||
}
|
||||
|
||||
this.dec_m();
|
||||
this.i = 0;
|
||||
},
|
||||
|
||||
tr: null,
|
||||
i: 0,
|
||||
append_date: function (d, active) {
|
||||
if(this.i % 7 == 0 || this.i == 0) {
|
||||
this.tr = $("<tr>");
|
||||
$(this.tbody).append(this.tr);
|
||||
}
|
||||
|
||||
var td = $("<td>");
|
||||
td.text(d);
|
||||
|
||||
if(active) {
|
||||
td.addClass("active");
|
||||
}
|
||||
|
||||
if(this.today[0] == d && this.today[1] == this.m && this.today[2] == this.y) {
|
||||
td.addClass("today");
|
||||
}
|
||||
|
||||
if(this.selected[0].val() == d && this.selected[1].val() == this.m && this.selected[2].val() == this.y) {
|
||||
td.addClass("selected");
|
||||
this.selected[3] = td;
|
||||
}
|
||||
|
||||
var x = this;
|
||||
$(td).click(function(){
|
||||
console.log("Set date: " + x.y + "/" + x.m + "/" + d);
|
||||
|
||||
x.selected[0].val(d);
|
||||
x.selected[1].val(x.m);
|
||||
x.selected[2].val(x.y);
|
||||
|
||||
$(x.selected[3]).removeClass("selected");
|
||||
x.selected[3] = this;
|
||||
$(x.selected[3]).addClass("selected");
|
||||
});
|
||||
|
||||
$(this.tr).append(td);
|
||||
this.i++;
|
||||
},
|
||||
|
||||
init: function (container) {
|
||||
var today = new Date();
|
||||
this.today = [today.getDate(), today.getMonth(), today.getFullYear()];
|
||||
|
||||
this.selected = [
|
||||
$(container).find(".day"),
|
||||
$(container).find(".month"),
|
||||
$(container).find(".year")
|
||||
];
|
||||
|
||||
var months = $(container).find(".month_names").val();
|
||||
this.months = months.split(",");
|
||||
|
||||
this.set_date(this.selected[1].val(), this.selected[2].val());
|
||||
|
||||
this.build_table(container);
|
||||
this.load_table();
|
||||
}
|
||||
};
|
||||
|
||||
datepick.init(container);
|
||||
return datepick;
|
||||
};
|
||||
|
|
@ -936,4 +936,60 @@ code {
|
|||
overflow: auto;
|
||||
white-space: pre;
|
||||
margin: 5px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* datepicker */
|
||||
.datepicker {
|
||||
text-align: center;
|
||||
}
|
||||
.datepicker table {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.datepicker th,
|
||||
.datepicker td {
|
||||
width: 12.5%;
|
||||
}
|
||||
|
||||
.datepicker td {
|
||||
color: #999;
|
||||
padding: 5px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.datepicker td.active {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.datepicker td.selected {
|
||||
color: black;
|
||||
background-color: #4267b2;
|
||||
}
|
||||
|
||||
.datepicker td.today {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.datepicker td.today:after {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: 50%;
|
||||
margin-top: -5px;
|
||||
right: 5px;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
content: ' ';
|
||||
background-color: red;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.datepicker td:hover {
|
||||
background-color: #ced0d4;
|
||||
border-color: #ced0d4;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.datepicker td.selected {
|
||||
color: white;
|
||||
border-color: #4267b2;
|
||||
background-color: #4267b2;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue