помогите доработать календарь
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>тест-календарь</title>
<style>
table {
border-collapse: separate;
width: 300px;
padding: 1px;
}
table, th, td {
border: 1px solid #c0c0c0;
margin: 1px;
}
td {
text-align: center;
}
.wrapper {
margin-top: 20px;
}
.anotherMonthWeek {
background-color: #ffffff;
color: #00bfff;
}
.anotherMonthWeekEnd {
background-color: #ffffff;
color: #f08080;
}
.currentMonthWeek {
background-color: #fff0f5;
color: #0000cd;
}
.currentMonthWeekEnd {
background-color: #ffb6c1;
color: #dc143c;
}
.currentMonthWeekToday {
background-color: #0000cd;
color: #fff0f5;
}
.currentMonthWeekEndToday {
background-color: #dc143c;
color: #ffb6c1;
}
</style>
</head>
<body>
<form name="formDate">
<label for="inpDate">Укажите дату:</label>
<input type="date" id="inpDate" name="inpDate">
</form>
<div class="wrapper" id="wrapper"></div>
<script>
var wrapper = document.getElementById("wrapper");
var form = document.forms.formDate;
if(wrapper && form){
form.addEventListener('change', function(event){
var date = form.inpDate.valueAsDate;
if(date){
date.setDate(1);
date.setHours(0);
date.setSeconds(0);
date.setMilliseconds(0);
var date2 = new Date(date.getTime());
var month = date.getMonth();
while(date.getDay() != 1){ date.setDate(date.getDate()-1); }
date2.setMonth(date2.getMonth()+1);
date2.setDate(1);
date2.setHours(0);
date2.setSeconds(0);
date2.setMilliseconds(0);
var trs = Math.ceil((date2-date)/1000/3600/24/7)+1;
var table = document.createElement('table');
var i = 0;
var daysPerWeek = 7;
while(i<trs){
var tr = document.createElement('tr');
if(i == 0){
for(var j=0; j<daysPerWeek; j++){
var th = document.createElement('th');
th.innerText = getShortNameOfDay(j);
tr.appendChild(th);
}
table.appendChild(tr);
}
else{
for(var j=0; j<daysPerWeek; j++){
var td = document.createElement('td');
if(date.getMonth() == month){
if(date.getDay() == 0 || date.getDay() == 6){
td.className = "currentMonthWeekEnd";
}
else{
td.className = "currentMonthWeek";
}
}
else {
if(date.getDay() == 0 || date.getDay() == 6){
td.className = "anotherMonthWeekEnd";
}
else{
td.className = "anotherMonthWeek";
}
}
td.innerText = date.getDate();
date.setDate(date.getDate() + 1);
tr.appendChild(td);
table.appendChild(tr);
}
}
i++;
}
wrapper.innerHTML = "";
wrapper.appendChild(table);
}
});
form.inpDate.valueAsDate = new Date();
var event = new Event('change');
form.dispatchEvent(event);
}
function getShortNameOfDay(x){
var name = "xx";
switch(x){
case 0: name = "Пн"; break;
case 1: name = "Вт"; break;
case 2: name = "Ср"; break;
case 3: name = "Чт"; break;
case 4: name = "Пт"; break;
case 5: name = "Сб"; break;
case 6: name = "Вс";
}
return name;
}
</script>
</body>
</html>
|
надо подсветить дни недели, сегодн число и сегодн день недели
|
Блондинка,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>тест-календарь</title>
<style>
table {
border-collapse: separate;
width: 300px;
padding: 1px;
}
table, th, td {
border: 1px solid #c0c0c0;
margin: 1px;
}
td {
text-align: center;
}
.wrapper {
margin-top: 20px;
}
.anotherMonthWeek {
background-color: #ffffff;
color: #00bfff;
}
.anotherMonthWeekEnd {
background-color: #ffffff;
color: #f08080;
}
.currentMonthWeek {
background-color: #fff0f5;
color: #0000cd;
}
.currentMonthWeekEnd {
background-color: #ffb6c1;
color: #dc143c;
}
.currentMonthWeekToday {
background-color: #0000cd;
color: #fff0f5;
}
.currentMonthWeekEndToday {
background-color: #dc143c;
color: #ffb6c1;
}
.currentDay{
background-color: #228B22;
color: #FFFFFF;
}
#wrapper th{
background-color: #EEE8AA;
}
#wrapper th.currentDay{
border-bottom: 3px solid #228B22;
color: #000000;
}
</style>
</head>
<body>
<form name="formDate">
<label for="inpDate">Укажите дату:</label>
<input type="date" id="inpDate" name="inpDate">
</form>
<div class="wrapper" id="wrapper"></div>
<script>
var wrapper = document.getElementById("wrapper");
var form = document.forms.formDate;
if(wrapper && form){
form.addEventListener('change', function(event){
var date = form.inpDate.valueAsDate;
if(date){
var current = new Date();
current.setHours(0,0,0,0);
date.setDate(1);
date.setHours(0);
date.setSeconds(0);
date.setMilliseconds(0);
var date2 = new Date(date.getTime());
var month = date.getMonth();
while(date.getDay() != 1){ date.setDate(date.getDate()-1); }
date2.setMonth(date2.getMonth()+1);
date2.setDate(1);
date2.setHours(0);
date2.setSeconds(0);
date2.setMilliseconds(0);
var trs = Math.ceil((date2-date)/1000/3600/24/7)+1;
var table = document.createElement('table');
var i = 0;
var daysPerWeek = 7;
while(i<trs){
var tr = document.createElement('tr');
if(i == 0){
for(var j=0; j<daysPerWeek; j++){
var th = document.createElement('th');
th.innerText = getShortNameOfDay(j);
tr.appendChild(th);
}
table.appendChild(tr);
}
else{
for(var j=0; j<daysPerWeek; j++){
var td = document.createElement('td');
if(date.getMonth() == month){
if(date.getDay() == 0 || date.getDay() == 6){
td.className = "currentMonthWeekEnd";
}
else{
td.className = "currentMonthWeek";
}
}
else {
if(date.getDay() == 0 || date.getDay() == 6){
td.className = "anotherMonthWeekEnd";
}
else{
td.className = "anotherMonthWeek";
}
}
if(date.getTime() == current.getTime()) {
td.className = "currentDay";
table.querySelectorAll("th")[j].className = "currentDay"
}
td.innerText = date.getDate();
date.setDate(date.getDate() + 1);
tr.appendChild(td);
table.appendChild(tr);
}
}
i++;
}
wrapper.innerHTML = "";
wrapper.appendChild(table);
}
});
form.inpDate.valueAsDate = new Date();
var event = new Event('change');
form.dispatchEvent(event);
}
function getShortNameOfDay(x){
var name = "xx";
switch(x){
case 0: name = "Пн"; break;
case 1: name = "Вт"; break;
case 2: name = "Ср"; break;
case 3: name = "Чт"; break;
case 4: name = "Пт"; break;
case 5: name = "Сб"; break;
case 6: name = "Вс";
}
return name;
}
</script>
</body>
</html>
|
рони,
Спасибо, почти то что надо, сорри что не до конца сформулировала вопрос, было бы лучше если бы сег число было выделено одним из двух цветов, взависимости от того какой сегодня день, будний или выходной, и также с днями недели... |
т.е. подсветить пн-пт и сб вс разными цветами, а сег день недели, тоже двумя разнымм цветами, в зависимости от того будний или выходной...
|
P. S. и возможно ли добавить кнопку, что-то типа
<input type="month" id="inpDate" name="inpDate">
<button type="button">сегодня</button>
которая будет скрыта (display none) по умолчанию (при просмотре такущего месяца), и показывается только при просмотре предыдущих/будущих месяцев, и при клике на которую дата возвращается к сегодняшней, тоесть чтобы не прокручивать дату назад на 30-50 лет, а в один клик вернуться к сегодн месяцу. |
Блондинка,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>тест-календарь</title>
<style>
table {
border-collapse: separate;
width: 300px;
padding: 1px;
}
table, th, td {
border: 1px solid #c0c0c0;
margin: 1px;
}
td {
text-align: center;
}
.wrapper {
margin-top: 20px;
}
.anotherMonthWeek {
background-color: #ffffff;
color: #00bfff;
}
.anotherMonthWeekEnd {
background-color: #ffffff;
color: #f08080;
}
.currentMonthWeek {
background-color: #fff0f5;
color: #0000cd;
}
.currentMonthWeekEnd {
background-color: #ffb6c1;
color: #dc143c;
}
.currentMonthWeekToday {
background-color: #0000cd;
color: #fff0f5;
}
.currentMonthWeekEndToday {
background-color: #dc143c;
color: #ffb6c1;
}
.currentDay{
background-color: #228B22;
color: #FFFFFF;
}
#wrapper th{
background-color: #EEE8AA;
color: #000000;
}
#wrapper th:nth-child(n+6){
background-color: #EE82EE;
}
#wrapper th.currentDay{
border-bottom: 3px solid #228B22;
color: #000000;
}
#wrapper th:nth-child(n+6).currentDay{
border-bottom: 3px solid #FF1493;
color: #000000;
}
#wrapper td:nth-child(n+6).currentDay{
background-color: #FF1493;
color: #FFFFFF;
}
button.current.hide{
display: none;
}
</style>
</head>
<body>
<form name="formDate">
<label for="inpDate">Укажите дату:</label>
<input type="date" id="inpDate" name="inpDate">
<button type="button" class="current hide">сегодня</button>
</form>
<div class="wrapper" id="wrapper"></div>
<script>
var wrapper = document.getElementById("wrapper");
var form = document.forms.formDate;
var button = document.querySelector("button.current");
function createTable(event){
var date = form.inpDate.valueAsDate;
if(button) button.classList.remove("hide");
if(date){
var current = new Date();
current.setHours(0,0,0,0);
date.setDate(1);
date.setHours(0);
date.setSeconds(0);
date.setMilliseconds(0);
var date2 = new Date(date.getTime());
var month = date.getMonth();
while(date.getDay() != 1){ date.setDate(date.getDate()-1); }
date2.setMonth(date2.getMonth()+1);
date2.setDate(1);
date2.setHours(0);
date2.setSeconds(0);
date2.setMilliseconds(0);
var trs = Math.ceil((date2-date)/1000/3600/24/7)+1;
var table = document.createElement('table');
var i = 0;
var daysPerWeek = 7;
while(i<trs){
var tr = document.createElement('tr');
if(i == 0){
for(var j=0; j<daysPerWeek; j++){
var th = document.createElement('th');
th.innerText = getShortNameOfDay(j);
tr.appendChild(th);
}
table.appendChild(tr);
}
else{
for(var j=0; j<daysPerWeek; j++){
var td = document.createElement('td');
if(date.getMonth() == month){
if(date.getDay() == 0 || date.getDay() == 6){
td.className = "currentMonthWeekEnd";
}
else{
td.className = "currentMonthWeek";
}
}
else {
if(date.getDay() == 0 || date.getDay() == 6){
td.className = "anotherMonthWeekEnd";
}
else{
td.className = "anotherMonthWeek";
}
}
if(date.getTime() == current.getTime()) {
td.className = "currentDay";
table.querySelectorAll("th")[j].className = "currentDay";
if(button) button.classList.add("hide");
}
td.innerText = date.getDate();
date.setDate(date.getDate() + 1);
tr.appendChild(td);
table.appendChild(tr);
}
}
i++;
}
wrapper.innerHTML = "";
wrapper.appendChild(table);
}
};
function setToday()
{
form.inpDate.valueAsDate = new Date();
var event = new Event('change');
form.dispatchEvent(event);
}
if(wrapper && form){
form.addEventListener('change', createTable);
button && button.addEventListener("click", setToday);
setToday()
}
function getShortNameOfDay(x){
var name = "xx";
switch(x){
case 0: name = "Пн"; break;
case 1: name = "Вт"; break;
case 2: name = "Ср"; break;
case 3: name = "Чт"; break;
case 4: name = "Пт"; break;
case 5: name = "Сб"; break;
case 6: name = "Вс";
}
return name;
}
</script>
</body>
</html>
|
рони, всё супер, надеюсь что если изменить тип поля с input type data на input type month это не повлияет на работу скрипта...
|
Rise, не совсем поняла ваш вопрос, там только одно поле и одна кнопка, и я спросила, изменение типа поля, type data на type month не повлияет на работу скрипта?
|
Rise,
В смысле, зачем сетка календаря на месяц, я правильно сформулировала ваш вопрос? |
Блондинка,
в теге input есть свой календарь, зачем ещё один, спрашивает Rise? |
Возникла одна проблема, вчера отложила телефон, экран естественно погас, сегодня включаю тел и в календаре подсвечены вчерашние число и день недели...
Второй момент, если на страницу зайти без малого полночь, пока читаешь текст страницы наступают новые сутки а подсвечены остаются день и число вчерашних суток... Возможно ли как-то отследить что экран включился, а также наступление 00:00 часов и обновить отдельный блок? Вот немного поправила стили и html...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>тест-календарь</title>
<style>
body {
width: 350px;
}
#calendar {
width: 320px;
padding: 5px;
margin: 5px;
border: 1px solid #a9a9a9;
border-radius: 6px/4px;
}
input[type=month] {
width: 100%;
border: 1px solid #a9a9a9;
border-radius: 6px/4px;
text-align: center;
}
table {
border-collapse: separate;
width: 100%;
padding: 1px;
}
table, th, td {
border: 1px solid #a9a9a9;
border-radius: 6px/4px;
margin: 1px;
}
th, td {
text-align: center;
}
.wrapper {
margin-top: 5px;
}
.anotherMonthWeek {
background-color: #e6f5ff;
color: #9ed9ff;
border: 1px solid #dcdcdc;
} /* дата будние дни другой месяц */
.anotherMonthWeekEnd {
background-color: #fff5fa;
color: #ffb8db;
border: 1px solid #dcdcdc;
} /* дата выходные дни другой месяц */
.currentMonthWeek {
background-color: #def1ff;
color: #0091ff;
}
.currentMonthWeekEnd {
background-color: #ffc3d7;
color: #dc143c;
} /* дата выходные дни */
.currentDay{
background-color: #c2d6ff;
border: 1px solid #0000ff;
font-weight: bold;
color: #ffffff;
text-shadow: 1px 1px #0000ff, -1px 1px #0000ff, 1px -1px #0000ff, -1px -1px #0000ff, 1px 0px #0000ff, 0px 1px #0000ff, -1px 0px #0000ff, 0px -1px #0000ff;
}
#wrapper th {
background-color: #c2d6ff;
color: #0069ff;
}
#wrapper th:nth-child(n+6){
background-color: #ffb4d2;
color: #b92346;
} /* дни недели выходные дни */
#wrapper th.currentDay {
border: 1px solid #285fcd;
background-color: #6b9cff;
color: #E6f5ff;
text-shadow: 1px 1px #285fcd, -1px 1px #285fcd, 1px -1px #285fcd, -1px -1px #285fcd, 1px 0px #285fcd, 0px 1px #285fcd, -1px 0px #285fcd, 0px -1px #285fcd;
}
#wrapper th:nth-child(n+6).currentDay{
border: 1px solid #b92346;
background-color: #ff73a0;
color: #ffafc8;
text-shadow: 1px 1px #b92346, -1px 1px #b92346, 1px -1px #b92346, -1px -1px #b92346, 1px 0px #b92346, 0px 1px #b92346, -1px 0px #b92346, 0px -1px #b92346;
}
#wrapper td:nth-child(n+6).currentDay{
background-color: #ff85ad;
border: 1px solid #ff0000;
font-weight: bold;
color: #ffffff;
text-shadow: 1px 1px #ff0000, -1px 1px #ff0000, 1px -1px #ff0000, -1px -1px #ff0000, 1px 0px #ff0000, 0px 1px #ff0000, -1px 0px #ff0000, 0px -1px #ff0000;
}
button.current.hide {
display: none;
}
button {
width: 100%;
border: 1px solid #a9a9a9;
border-radius: 6px/4px;
}
</style>
</head>
<body>
<div id="calendar">
<form name="formDate">
<input type="month" id="inpDate" name="inpDate">
<button type="button" class="current hide">сегодня</button>
</form>
<div class="wrapper" id="wrapper"></div>
<script>
var wrapper = document.getElementById("wrapper");
var form = document.forms.formDate;
var button = document.querySelector("button.current");
function createTable(event){
var date = form.inpDate.valueAsDate;
if(button) button.classList.remove("hide");
if(date){
var current = new Date();
current.setHours(0,0,0,0);
date.setDate(1);
date.setHours(0);
date.setSeconds(0);
date.setMilliseconds(0);
var date2 = new Date(date.getTime());
var month = date.getMonth();
while(date.getDay() != 1){ date.setDate(date.getDate()-1); }
date2.setMonth(date2.getMonth()+1);
date2.setDate(1);
date2.setHours(0);
date2.setSeconds(0);
date2.setMilliseconds(0);
var trs = Math.ceil((date2-date)/1000/3600/24/7)+1;
var table = document.createElement('table');
var i = 0;
var daysPerWeek = 7;
while(i<trs){
var tr = document.createElement('tr');
if(i == 0){
for(var j=0; j<daysPerWeek; j++){
var th = document.createElement('th');
th.innerText = getShortNameOfDay(j);
tr.appendChild(th);
}
table.appendChild(tr);
}
else{
for(var j=0; j<daysPerWeek; j++){
var td = document.createElement('td');
if(date.getMonth() == month){
if(date.getDay() == 0 || date.getDay() == 6){
td.className = "currentMonthWeekEnd";
}
else{
td.className = "currentMonthWeek";
}
}
else {
if(date.getDay() == 0 || date.getDay() == 6){
td.className = "anotherMonthWeekEnd";
}
else{
td.className = "anotherMonthWeek";
}
}
if(date.getTime() == current.getTime()) {
td.className = "currentDay";
table.querySelectorAll("th")[j].className = "currentDay";
if(button) button.classList.add("hide");
}
td.innerText = date.getDate();
date.setDate(date.getDate() + 1);
tr.appendChild(td);
table.appendChild(tr);
}
}
i++;
}
wrapper.innerHTML = "";
wrapper.appendChild(table);
}
};
function setToday()
{
form.inpDate.valueAsDate = new Date();
var event = new Event('change');
form.dispatchEvent(event);
}
if(wrapper && form){
form.addEventListener('change', createTable);
button && button.addEventListener("click", setToday);
setToday()
}
function getShortNameOfDay(x){
var name = "xx";
switch(x){
case 0: name = "Пн"; break;
case 1: name = "Вт"; break;
case 2: name = "Ср"; break;
case 3: name = "Чт"; break;
case 4: name = "Пт"; break;
case 5: name = "Сб"; break;
case 6: name = "Вс";
}
return name;
}
</script>
</div>
</body>
</html>
|
Rise,
К сожалению для меня не очевидно, поскольку хромом я пользуюсь очень редко, а в моём браузере данных кнопочек нету, если предложишь свой вариант календаря заменив поле для ввода месяца на выпадающий список с кнопками < и > для выбора месяца и поле ввода с кнопками < и > для ввода года, буду благодарна... |
Цитата:
|
laimas,
В Habbit browser для android... |
Rise,
обновление дива раз в секунду нормально? не слишком часто? можешь заменить поле для выбора месяца и добавить обновление дива? |
Русский,
по идее этот вариант должен сработать даже если просто отложить тел и экран погас, а потом через несколько дней зайти на эту страницу? |
недокалькуляторы, это что за зверь такой?
|
Русский,
параметр run сделает пример запускаемым. [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Народ, кто может исправить скрипт из 16 поста?
надо заменить <input type="month">на <button>«</button> <select name="month"> <option>январь</option> <option>февраль</option> <option>март</option> <option>апрель</option> <option>май</option> <option>июнь</option> <option>июль</option> <option>август</option> <option>сентябрь</option> <option>октябрь</option> <option>ноябрь</option> <option>декабрь</option> </select> <button>» </button> <button>« </button> <input name="year"> <button>» </button>и доработать обновление дива по таймеру при наступлении новых суток. |
Русский,
твой календарь, но почему-то страница пустая... |
рони,
возможно ли исправить и доработать твой вариант календаря? Цитата:
|
Блондинка,
может взять https://jqueryui.com/datepicker/#inline или https://xdan.ru/samij-udobnij-datetimepicker.html |
рони,
главное чтобы было: выпадающий список для выбора месяца с кнопками вперёд/назад поле ввода для ввода года с кнопками вперёд/назад скрытая кнопка сегодня подсвечено как в 16 посте и было обновление дива при наступлении 00:00 ч. остальное на своё усмотрение... (не имеет значения какой именно плагин) |
Блондинка,
Календарь UI
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/sunny/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
$.datepicker.regional['ru'] = {
closeText: 'Закрыть',
prevText: '<Пред',
nextText: 'След>',
currentText: 'Сегодня',
monthNames: ['Январь','Февраль','Март','Апрель','Май','Июнь', 'Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
monthNamesShort: ['Янв','Фев','Мар','Апр','Май','Июн', 'Июл','Авг','Сен','Окт','Ноя','Дек'],
dayNames: ['воскресенье','понедельник','вторник','среда','четверг','пятница','суббота'],
dayNamesShort: ['вск','пнд','втр','срд','чтв','птн','сбт'],
dayNamesMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
dateFormat: 'dd.mm.yy',
firstDay: 1,
isRTL: false,
showOtherMonths:true,
selectOtherMonths:true,
changeMonth:true,
changeYear: true,
gotoCurrent : false,
showButtonPanel:true,
showAnim:'scale'
};
$.datepicker.setDefaults($.datepicker.regional['ru']);
var datepicker = $( '#datepicker' ).datepicker({
onSelect : function(text, obj) {
console.log(text, obj)
}
})
var timer;
function refresh()
{
window.clearTimeout(timer);
var time = new Date();
var finish = (new Date()).setHours(24, 0, 0, 0);
finish -= time;
timer = window.setTimeout(function() {
datepicker.datepicker("refresh");
refresh()
}, finish)
}
refresh();
});
</script>
</head>
<body>
<div id="datepicker"></div>
</body>
</html>
|
Цитата:
добавил |
рони,
сорри, видимо на яваскрипт нереально создать календарь, в котором месяц можно выбрать в выпадающем списке а также с помощью кнопок вперед/назад, и год можно вводить с клавы а также с помощью кнопок типа как при использовании input type number но только видимые во всех браузерах(стилизовать поле убрал кнопки из оперы и добавив свои, видимые в всех браузерах)... |
Цитата:
|
Цитата:
|
рони, в сети десятки если не сотни календарей на яваскрипт, но у каждого свои недостатки...
|
Русский, а я думаю что виновата лень разработчиков, которым просто лень добавить лишнюю строчку с вендорным префиксами для свойства css например, и что лучше стараться писать код кроссбраузерность по возможности...
|
рони,
вот типа как тут, выпадающий список и поле ввода
<style>
#calendar3 {
width: 100%;
font: monospace;
line-height: 1.2em;
font-size: 15px;
text-align: center;
}
#calendar3 thead tr:last-child {
font-size: small;
color: rgb(85, 85, 85);
}
#calendar3 tbody td {
color: rgb(44, 86, 122);
}
#calendar3 tbody td:nth-child(n+6), #calendar3 .holiday {
color: rgb(231, 140, 92);
}
#calendar3 tbody td.today {
outline: 3px solid red;
}
</style>
<table id="calendar3">
<thead>
<tr><td colspan="4"><select>
<option value="0">Январь</option>
<option value="1">Февраль</option>
<option value="2">Март</option>
<option value="3">Апрель</option>
<option value="4">Май</option>
<option value="5">Июнь</option>
<option value="6">Июль</option>
<option value="7">Август</option>
<option value="8">Сентябрь</option>
<option value="9">Октябрь</option>
<option value="10">Ноябрь</option>
<option value="11">Декабрь</option>
</select><td colspan="3"><input type="number" value="" min="0" max="9999" size="4">
<tr><td>Пн<td>Вт<td>Ср<td>Чт<td>Пт<td>Сб<td>Вс
<tbody>
</table>
<script>
function Calendar3(id, year, month) {
var Dlast = new Date(year,month+1,0).getDate(),
D = new Date(year,month,Dlast),
DNlast = D.getDay(),
DNfirst = new Date(D.getFullYear(),D.getMonth(),1).getDay(),
calendar = '<tr>',
m = document.querySelector('#'+id+' option[value="' + D.getMonth() + '"]'),
g = document.querySelector('#'+id+' input');
if (DNfirst != 0) {
for(var i = 1; i < DNfirst; i++) calendar += '<td>';
}else{
for(var i = 0; i < 6; i++) calendar += '<td>';
}
for(var i = 1; i <= Dlast; i++) {
if (i == new Date().getDate() && D.getFullYear() == new Date().getFullYear() && D.getMonth() == new Date().getMonth()) {
calendar += '<td class="today">' + i;
}else{
if ( // список официальных праздников
(i == 1 && D.getMonth() == 0 && ((D.getFullYear() > 1897 && D.getFullYear() < 1930) || D.getFullYear() > 1947)) || // Новый год
(i == 2 && D.getMonth() == 0 && D.getFullYear() > 1992) || // Новый год
((i == 3 || i == 4 || i == 5 || i == 6 || i == 8) && D.getMonth() == 0 && D.getFullYear() > 2004) || // Новый год
(i == 7 && D.getMonth() == 0 && D.getFullYear() > 1990) || // Рождество Христово
(i == 23 && D.getMonth() == 1 && D.getFullYear() > 2001) || // День защитника Отечества
(i == 8 && D.getMonth() == 2 && D.getFullYear() > 1965) || // Международный женский день
(i == 1 && D.getMonth() == 4 && D.getFullYear() > 1917) || // Праздник Весны и Труда
(i == 9 && D.getMonth() == 4 && D.getFullYear() > 1964) || // День Победы
(i == 12 && D.getMonth() == 5 && D.getFullYear() > 1990) || // День России (декларации о государственном суверенитете Российской Федерации ознаменовала окончательный Распад СССР)
(i == 7 && D.getMonth() == 10 && (D.getFullYear() > 1926 && D.getFullYear() < 2005)) || // Октябрьская революция 1917 года
(i == 8 && D.getMonth() == 10 && (D.getFullYear() > 1926 && D.getFullYear() < 1992)) || // Октябрьская революция 1917 года
(i == 4 && D.getMonth() == 10 && D.getFullYear() > 2004) // День народного единства, который заменил Октябрьскую революцию 1917 года
) {
calendar += '<td class="holiday">' + i;
}else{
calendar += '<td>' + i;
}
}
if (new Date(D.getFullYear(),D.getMonth(),i).getDay() == 0) {
calendar += '<tr>';
}
}
for(var i = DNlast; i < 7; i++) calendar += '<td> ';
document.querySelector('#'+id+' tbody').innerHTML = calendar;
g.value = D.getFullYear();
m.selected = true;
if (document.querySelectorAll('#'+id+' tbody tr').length < 6) {
document.querySelector('#'+id+' tbody').innerHTML += '<tr><td> <td> <td> <td> <td> <td> <td> ';
}
document.querySelector('#'+id+' option[value="' + new Date().getMonth() + '"]').style.color = 'rgb(220, 0, 0)'; // в выпадающем списке выделен текущий месяц
}
Calendar3("calendar3",new Date().getFullYear(),new Date().getMonth());
document.querySelector('#calendar3').onchange = function Kalendar3() {
Calendar3("calendar3",document.querySelector('#calendar3 input').value,parseFloat(document.querySelector('#calendar3 select').options[document.querySelector('#calendar3 select').selectedIndex].value));
}
</script>
|
календарь с выбором месяца селектом и кнопками
Блондинка,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8" />
<style type="text/css">
#wrapper button:after {
content: 'prev';
}
#wrapper button:nth-of-type(2):after {
content: 'next';
}
#wrapper button:nth-of-type(3){
order: 1;
}
#wrapper button:nth-of-type(2){
order: 2;
}
#wrapper button:nth-of-type(3):after {
content: 'сегодня';
}
#wrapper input {
width: 50px;
height: 18px;
margin-top: -3px;
text-align: center;
}
#wrapper {
width: 320px;
padding: 5px;
margin: 5px;
border: 1px solid #a9a9a9;
border-radius: 6px/4px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#wrapper table {
flex: 1 0 100%;
border-collapse: separate;
width: 100%;
padding: 1px;
}
table,
th,
td {
border: 1px solid #a9a9a9;
border-radius: 6px/4px;
margin: 1px;
}
th,
td {
text-align: center;
}
.currentMonthWeek {
background-color: #def1ff;
color: #0091ff;
}
.currentMonthWeek:nth-child(n + 6) {
background-color: #ffc3d7;
color: #dc143c;
}
td.currentDay {
background-color: #c2d6ff;
border: 1px solid #00f;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px #00f, -1px 1px #00f, 1px -1px #00f, -1px -1px #00f,
1px 0 #00f, 0 1px #00f, -1px 0 #00f, 0 -1px #00f;
}
td.currentDay:nth-child(n + 6) {
background-color: #ffc3d7;
border: 1px solid #ff69b4;
text-shadow: 1px 1px #ff0000, -1px 1px #ff0000, 1px -1px #ff0000, -1px -1px #ff0000, 1px 0px #ff0000, 0px 1px #ff0000, -1px 0px #ff0000, 0px -1px #ff0000;
}
#wrapper th {
background-color: #c2d6ff;
color: #0069ff;
}
#wrapper th:nth-child(n + 6) {
background-color: #ffb4d2;
color: #b92346;
}
#wrapper th.currentDay {
border: 1px solid #285fcd;
background-color: #6b9cff;
color: #e6f5ff;
}
#wrapper th:nth-child(n + 6).currentDay {
background-color: #ff389c;
color: #ffed85;
}
#wrapper button {
flex 0;
border: 1px solid #a9a9a9;
border-radius: 6px/4px;
}
</style>
</head>
<body>
<div id="wrapper"></div>
<script>
let timer;
function createCalendar(id, year, month) {
const table = document.createElement('table');
const header = document.createElement('tr');
const daysOfWeek = ['пнд', 'втр', 'срд', 'чтв', 'птн', 'сбт', 'вск'];
const monthNames = [
'Январь',
'Февраль',
'Март',
'Апрель',
'Май',
'Июнь',
'Июль',
'Август',
'Сентябрь',
'Октябрь',
'Ноябрь',
'Декабрь',
];
const data = new Date(year, month, 0);
const daysInMonth = data.getDate();
const indexMonth = data.getMonth();
const currentData = new Date();
const currentDay = currentData.getDate();
const currentMonth = currentData.getMonth();
const currentFullYear = currentData.getFullYear();
let selectHtml = monthNames.reduce(
(html, nameMonth, i) =>
(html += `<option value=${i} ${
indexMonth == i ? 'selected' : ''
}>${nameMonth}`),
`<select>`
);
const yearFull = data.getFullYear();
selectHtml += `<input value=${yearFull}>`;
table.insertAdjacentHTML(
'beforeend',
`<tr><th colspan='7'>${selectHtml}</th></tr>`
);
for (const day of daysOfWeek)
header.insertAdjacentHTML('beforeend', `<th>${day}</th>`);
table.append(header);
let firstDay = (new Date(year, month - 1).getDay() + 6) % 7;
let nextDayToAdd = 1 - firstDay;
while (nextDayToAdd <= daysInMonth) {
const week = document.createElement('tr');
for (let i = 0; i < 7; i++) {
const day = document.createElement('td');
let cls = 'currentMonthWeek';
if (nextDayToAdd > 0 && nextDayToAdd <= daysInMonth) {
if (
currentMonth == indexMonth &&
currentFullYear == yearFull &&
nextDayToAdd == currentDay
) {
cls = 'currentDay';
table.querySelectorAll('th')[i + 1].className = 'currentDay';
}
day.innerHTML = nextDayToAdd;
}
cls && day.classList.add(cls);
nextDayToAdd++;
week.append(day);
}
table.append(week);
}
let div = document.getElementById(id);
div.innerHTML = '';
div.append(table);
[0, 2].forEach(n => {
let button = document.createElement('button');
button.addEventListener('click', () =>
createCalendar(id, yearFull, indexMonth + n)
);
div.append(button);
});
table.querySelector('select').addEventListener('input', function() {
createCalendar(id, yearFull, ++this.value);
});
table.querySelector('input').addEventListener('input', function() {
if (/^\d{4}$/.test(this.value))
createCalendar(id, +this.value, indexMonth + 1);
});
if (currentMonth != indexMonth || currentFullYear != yearFull) {
let button = document.createElement('button');
button.addEventListener('click', () =>
createCalendar(id, currentFullYear, currentMonth + 1)
);
div.append(button);
}
function refresh() {
window.clearTimeout(timer);
let finish = new Date().setHours(24, 0, 0, 0);
finish -= currentData;
timer = window.setTimeout(function() {
createCalendar(id, yearFull, indexMonth + 1);
refresh();
}, finish);
}
refresh();
return table;
}
let table = createCalendar('wrapper', 2019, 6);
</script>
</body>
</html>
|
рони,
если честно, то даже не знаю как реагировать, дело в том что при просмотре запускаемого примера а также в блокноте виден только див
#wrapper {
036
width: 320px;
037
padding: 5px;
038
margin: 5px;
039
border: 1px solid #a9a9a9;
040
border-radius: 6px/4px;
видимо и телефон и браузер безнадежно устарели настолько, что мне не суждено увидеть даже календарь... |
Русский,
под словом "кросбраузерно" подразумевается основные браузеры версии хотя бы 2-3 летней давности, но никак не браузеры 90х годов прошлого столетия... |
Цитата:
|
calendar select es5 polyfill
Блондинка,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8" />
<style type="text/css">
#wrapper button:after {
content: 'prev';
}
#wrapper button:nth-of-type(2):after {
content: 'next';
}
#wrapper button:nth-of-type(3){
order: 1;
}
#wrapper button:nth-of-type(2){
order: 2;
}
#wrapper button:nth-of-type(3):after {
content: 'сегодня';
}
#wrapper input {
width: 50px;
height: 18px;
margin-top: -3px;
text-align: center;
}
#wrapper {
width: 320px;
padding: 5px;
margin: 5px;
border: 1px solid #a9a9a9;
border-radius: 6px/4px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#wrapper table {
flex: 1 0 100%;
border-collapse: separate;
width: 100%;
padding: 1px;
}
table,
th,
td {
border: 1px solid #a9a9a9;
border-radius: 6px/4px;
margin: 1px;
}
th,
td {
text-align: center;
}
.currentMonthWeek {
background-color: #def1ff;
color: #0091ff;
}
.currentMonthWeek:nth-child(n + 6) {
background-color: #ffc3d7;
color: #dc143c;
}
td.currentDay {
background-color: #c2d6ff;
border: 1px solid #00f;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px #00f, -1px 1px #00f, 1px -1px #00f, -1px -1px #00f,
1px 0 #00f, 0 1px #00f, -1px 0 #00f, 0 -1px #00f;
}
td.currentDay:nth-child(n + 6) {
background-color: #ffc3d7;
border: 1px solid #ff69b4;
text-shadow: 1px 1px #ff0000, -1px 1px #ff0000, 1px -1px #ff0000, -1px -1px #ff0000, 1px 0px #ff0000, 0px 1px #ff0000, -1px 0px #ff0000, 0px -1px #ff0000;
}
#wrapper th {
background-color: #c2d6ff;
color: #0069ff;
}
#wrapper th:nth-child(n + 6) {
background-color: #ffb4d2;
color: #b92346;
}
#wrapper th.currentDay {
border: 1px solid #285fcd;
background-color: #6b9cff;
color: #e6f5ff;
}
#wrapper th:nth-child(n + 6).currentDay {
background-color: #ff389c;
color: #ffed85;
}
#wrapper button {
flex 0;
border: 1px solid #a9a9a9;
border-radius: 6px/4px;
}
</style>
<script src="https://polyfill.io/v3/polyfill.min.js"></script>
</head>
<body>
<div id="wrapper"></div>
<script>
"use strict";
var timer;
function createCalendar(id, year, month) {
var table = document.createElement('table');
var header = document.createElement('tr');
var daysOfWeek = ['пнд', 'втр', 'срд', 'чтв', 'птн', 'сбт', 'вск'];
var monthNames = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];
var data = new Date(year, month, 0);
var daysInMonth = data.getDate();
var indexMonth = data.getMonth();
var currentData = new Date();
var currentDay = currentData.getDate();
var currentMonth = currentData.getMonth();
var currentFullYear = currentData.getFullYear();
var selectHtml = monthNames.reduce(function (html, nameMonth, i) {
return html += "<option value=".concat(i, " ").concat(indexMonth == i ? 'selected' : '', ">").concat(nameMonth);
}, "<select>");
var yearFull = data.getFullYear();
selectHtml += "<input value=".concat(yearFull, ">");
table.insertAdjacentHTML('beforeend', "<tr><th colspan='7'>".concat(selectHtml, "</th></tr>"));
for (var _i = 0, _daysOfWeek = daysOfWeek; _i < _daysOfWeek.length; _i++) {
var _day = _daysOfWeek[_i];
header.insertAdjacentHTML('beforeend', "<th>".concat(_day, "</th>"));
}
table.append(header);
var firstDay = (new Date(year, month - 1).getDay() + 6) % 7;
var nextDayToAdd = 1 - firstDay;
while (nextDayToAdd <= daysInMonth) {
var week = document.createElement('tr');
for (var i = 0; i < 7; i++) {
var day = document.createElement('td');
var cls = 'currentMonthWeek';
if (nextDayToAdd > 0 && nextDayToAdd <= daysInMonth) {
if (currentMonth == indexMonth && currentFullYear == yearFull && nextDayToAdd == currentDay) {
cls = 'currentDay';
table.querySelectorAll('th')[i + 1].className = 'currentDay';
}
day.innerHTML = nextDayToAdd;
}
cls && day.classList.add(cls);
nextDayToAdd++;
week.append(day);
}
table.append(week);
}
var div = document.getElementById(id);
div.innerHTML = '';
div.append(table);
[0, 2].forEach(function (n) {
var button = document.createElement('button');
button.addEventListener('click', function () {
return createCalendar(id, yearFull, indexMonth + n);
});
div.append(button);
});
table.querySelector('select').addEventListener('change', function () {
createCalendar(id, yearFull, ++this.value);
});
table.querySelector('input').addEventListener('input', function () {
if (/^\d{4}$/.test(this.value)) createCalendar(id, +this.value, indexMonth + 1);
});
if (currentMonth != indexMonth || currentFullYear != yearFull) {
var button = document.createElement('button');
button.addEventListener('click', function () {
return createCalendar(id, currentFullYear, currentMonth + 1);
});
div.append(button);
}
function refresh() {
window.clearTimeout(timer);
var finish = new Date().setHours(24, 0, 0, 0);
finish -= currentData;
timer = window.setTimeout(function () {
createCalendar(id, yearFull, indexMonth + 1);
refresh();
}, finish);
}
refresh();
return table;
}
var table = createCalendar('wrapper', 2019, 6);
</script>
</body>
</html>
|
Блондинка,
конвертор в es5 https://babeljs.io/repl Copy & Paste скопировать код es6, получить код es5, заменить одно на другое, добавить полифил перед кодом, если нужно. <script src="https://polyfill.io/v3/polyfill.min.js"></script> |
рони, сейчас скрипт почти работает,
при загрузке страницы отображается сетка календаря за июнь 2019, а хотелось бы чтобы был текущий месяц при вводе года и при клике на кнопки всё работает, но при попытке выбрать месяц в выпадающем списке ничего не меняется, хотелось бы чтобы и селект работал возможно ли добавить кнопки для перемещения По годам (и разместить кнопки перед таблицей, возле списка/поля) возможно ли заполнить пустые ячейки числами пред/буд месяца разными отдельными стилями как в 16 посте? |
Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 09:34. |