13.07.2019, 14:35
|
 |
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
помогите доработать календарь
<!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>
Последний раз редактировалось Блондинка, 27.05.2021 в 21:23.
|
|
13.07.2019, 14:41
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
надо подсветить дни недели, сегодн число и сегодн день недели
|
|
13.07.2019, 16:20
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,070
|
|
Блондинка,
<!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>
|
|
14.07.2019, 00:46
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
рони,
Спасибо, почти то что надо, сорри что не до конца сформулировала вопрос, было бы лучше если бы сег число было выделено одним из двух цветов, взависимости от того какой сегодня день, будний или выходной, и также с днями недели...
|
|
14.07.2019, 00:58
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
т.е. подсветить пн-пт и сб вс разными цветами, а сег день недели, тоже двумя разнымм цветами, в зависимости от того будний или выходной...
|
|
14.07.2019, 04:52
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
P. S. и возможно ли добавить кнопку, что-то типа
<input type="month" id="inpDate" name="inpDate">
<button type="button">сегодня</button>
которая будет скрыта (display none) по умолчанию (при просмотре такущего месяца), и показывается только при просмотре предыдущих/будущих месяцев, и при клике на которую дата возвращается к сегодняшней, тоесть чтобы не прокручивать дату назад на 30-50 лет, а в один клик вернуться к сегодн месяцу. |
|
14.07.2019, 08:26
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,070
|
|
Блондинка,
<!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>
|
|
15.07.2019, 02:47
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
рони, всё супер, надеюсь что если изменить тип поля с input type data на input type month это не повлияет на работу скрипта...
|
|
15.07.2019, 17:22
|
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
|
Блондинка, что-то я не понял в чем прикол, в поле date там встроенный календарь имеется, а внизу у вас еще один, это зачем так?
|
|
16.07.2019, 08:47
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
Rise, не совсем поняла ваш вопрос, там только одно поле и одна кнопка, и я спросила, изменение типа поля, type data на type month не повлияет на работу скрипта?
|
|
|
|
