Skip to content

Instantly share code, notes, and snippets.

@A-gambit

A-gambit/jsbin.mibuq.css

Created June 2, 2014 18:45
Show Gist options
  • Save A-gambit/d05d52bcdd640c5052cc to your computer and use it in GitHub Desktop.
Save A-gambit/d05d52bcdd640c5052cc to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.mibuq.css
body, table, td, th, span, div{
padding: 0px;
margin: 0px;
}
body{
background: #dedede;
}
table {
border-collapse: collapse;
}
td, th {
width: 30px;
height: 30px;
border: 1px solid #dedede;
padding: 3px;
text-align: center;
}
td {
font-family: "Myriad Pro";
color: rgb(67, 67, 67);
font-size: 16px;
font-weight: 400;
line-height: 1.125;
width: 17px;
height: 10px;
cursor: pointer;
}
td:hover,
.target{
background-color: rgb(200, 47, 13);
color: #fff;
}
th{
font-family: "Myriad Pro";
color: rgba(43, 43, 43, 0.46);
font-size: 16px;
border: none;
font-weight: normal;
}
.time{
font-family: "Myriad Pro";
text-align: center;
width: 210px;
font-size: 16px;
background: rgb(200, 47, 13);
color: rgb(255, 255, 255);
font-weight: bold !important;
border-radius: 0px 0px 5px 5px;
}
.left,
.right{
font-size: 16px;
font-family: "Myriad Pro";
color: rgba(43, 43, 43, 0.46);
cursor: pointer;
padding-left: 4px;
padding-right: 4px;
}
.time,
.left,
.right{
display: inline-block;
padding-bottom: 2px;
padding-top: 2px;
}
.cur__data{
font-size: 18px;
color: rgb(159, 159, 159);
background: rgb(237, 237, 237);
}
.block{
margin-left: 40px;
margin-top: 20px;
background: rgb(255, 255, 255);
border-radius: 5px;
width: 255px;
}
.lable{
font-family: "Myriad Pro";
color: rgba(43, 43, 43, 0.46);;
font-weight: bold !important;
margin-left: 5px;
margin-right: 17px;
}
#text{
width: 160px;
text-align: center;
background: #fff;
outline: none;
font-size: 14px;
font-family: "Myriad Pro";
border-radius: 5px;
border: none;
background: #dedede;
}
#text:focus{
background: rgb(200, 47, 13);
color: rgb(255, 255, 255);
}
.wrong{
position: absolute;
top: 10px;
left: 50px;
text-align: center;
width: 210px;
font-size: 16px;
background: rgb(200, 47, 13);
color: rgb(255, 255, 255);
font-weight: bold !important;
border-radius: 60px;
display: none;
}
.form{
width: 235px;
border-radius: 5px;
position: relative;
background: #fff;
padding: 10px;
margin-top: 40px;
margin-left: 40px;
}
Raw
jsbin.mibuq.html
<!DOCTYPE HTML>
<html>
<head>
<title>Data</title>
<meta charset="utf-8">
</head>
<body>
<div class="wrong">
<span>Wrong date</span>
</div>
<div class="form">
<span class="lable">Date:</span>
<input type="text" id="text" onchange="controlByForm();">
</div>
<div class="block">
<span class="left" onclick="preMonth()">
<
</span>
<div class="time">
<span id="month"></span>
<span id="year"></span>
</div>
<span class="right" onclick="nextMonth()">
>
</span></br>
<table id="calendar" onclick="tackDay()"></table>
</div>
<script>
</script>
</body>
</html>
Raw
jsbin.mibuq.js
var globalData = new Date();
var targetBlock;
function setCurData(data, task){
var calendarBlock = document.getElementById("calendar");
makeYear(data);
var add = "<tr class='first__line'><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th><th>Sun</th></tr>";
var month = new Date(data.getFullYear(), data.getMonth());
add = makeMonth(month,add,data,task);
calendarBlock.innerHTML = add;
targetBlock = document.getElementById("calendar").children[0].children[1].children[0];
function mackTargetStyle(){
var fEl = document.getElementById("calendar").children[0].children[1].children[0],
sEl = document.getElementById("calendar").children[0].children[1].children[1];
var day = makeDay();
var condition = fEl == day;
targetBlock = condition ? sEl : fEl;
}
function makeYear(data){
var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
var curYear = document.getElementById("year");
var curMonth = document.getElementById("month");
curYear.innerHTML = data.getFullYear();
curMonth.innerHTML = monthNames[data.getMonth()];
}
function makeMonth(month,add,data,task){
add= addDay(month,add);
add= makeAll(month,add,data,task);
add=addLast(month,add);
add+='</tr>';
return add;
}
function makeAll(month,add,data,task){
var m = data.getMonth();
while(month.getMonth() == m) {
var condition = month.getDate()==data.getDate() && task;
if(condition) add = addStyle(add,month);
else add += '<td>'+month.getDate()+'</td>';
condition = knowDay(month) % 7 == 6;
add = condition ? nextLine(add) : add;
month.setDate(month.getDate()+1);
}
return add;
}
function addDay(month,add){
add=makeSpaceEl(add,0,knowDay(month));
return add;
}
function addLast(month,add){
var condition = knowDay(month)!=0;
add = condition ? makeSpaceEl(add,knowDay(month),7) : add;
nextLine(add);
return add;
}
function nextLine(add){
add += '</tr><tr>';
return add;
}
function makeSpaceEl(add,first,last){
for(var i=first; i<last; i++)
add+='<td></td>';
return add;
}
function knowDay(date){
var day = date.getDay(),
returnDay;
var condition = day==0;
returnDay = condition ? 6 : day - 1;
return returnDay;
}
function addStyle(add,month){
add += '<td class="cur__data">'+month.getDate()+'</td>';
return add;
}
}
function generateCurData(){
var curData = new Date();
setCurData(curData, true);
addInForm(curData,true);
}
function checkIfNow(curData){
var data = new Date();
var condition = (data.getMonth() == curData.getMonth()) && (data.getFullYear() == curData.getFullYear());
return condition;
}
function preMonth(){
globalData.setMonth(globalData.getMonth()-1);
var task = checkIfNow(globalData);
setCurData(globalData, task);
addInForm(globalData,true);
}
function nextMonth(){
globalData.setMonth(globalData.getMonth()+1);
var task = checkIfNow(globalData);
setCurData(globalData, task);
addInForm(globalData,true);
}
function addInForm(data, flag){
var form = document.getElementById("text");
var day = globalData.getDate(),
month = globalData.getMonth()+1;
if(flag){
var task = checkIfNow(globalData);
day = task ? makeDay() : 1;
}
day=preDate(day);
month=preDate(month);
form.value = day+"."+month+"."+ globalData.getFullYear();
function preDate(data){
var condition = data<10;
data = condition ? "0"+data : data;
return data;
}
function makeDay(){
var data = new Date(),
day = data.getDate();
return day;
}
}
function tackDay(){
var el = event.target || event.srcElement;
var td = document.getElementById("calendar");
td = td.children[0].children[1].children[0];
var condition = el.tagName == td.tagName && el.innerHTML != "";
if(condition){
makeStyle(el);
globalData.setDate(el.innerHTML);
addInForm(globalData, false);
}
function makeStyle(el){
targetBlock.style.cssText = " color: rgb(67, 67, 67); background-color: #fff;";
targetBlock = el;
targetBlock.style.cssText = "background-color: rgb(200, 47, 13); color: #fff;";
}
}
generateCurData();
function controlByForm(){
var data = getDataFromForm();
setCurData(data, true);
}
function getDataFromForm(){
var time = document.getElementById("text"),
day = time.value[0] + time.value[1],
month = time.value[3] + time.value[4],
year = time.value[6] + time.value[7] + time.value[8] + time.value[9];
day = parseInt(day);
month = parseInt(month);
year = parseInt(year);
var date = new Date(year, month, day);
return date;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment