Смена формата даты и копирования в буфер обмена через скрипт

Рейтинг: 0Ответов: 1Опубликовано: 23.06.2023

В документ добавлен календарь

<input type="date" id="my-date-input">

Есть скрипт который должен копировать поля определённые в буфер, пользователь должен установить дату, скрипт сменить ей формат на dd.mm.yyyy и включить в тот же текст к этим полям.

Да, он включает в текст. и подменяет дату, но не реагирует на выбор даты. а всегда подставляет текущею. Как сделать так, что бы копировалась именно выбранная дата?

Сам скрипт

const date = new Date(); 
const options = { day: '2-digit', month: '2-digit', year: 'numeric' };
const formattedDate = date.toLocaleDateString('ru-RU', options);
document.getElementById('my-date-input').value = formattedDate;

function copyValues() {
    var selectValue = document.getElementById("select").value;
    var textareaValue = document.getElementById("textarea").value;
    var dayValue = document.getElementById("day").value;
    var monthValue = document.getElementById("month").value;
    var yearValue = document.getElementById("year").value;
    var clock1Value = document.getElementById("clock1").value;
    var clock2Value = document.getElementById("clock2").value;

    var combinedValue = selectValue + " " + dayValue + "." + monthValue + "." + yearValue + " " + clock1Value + - + clock2Value + "\n" + textareaValue +  formattedDate;

    navigator.clipboard.writeText(combinedValue);

}


function buttonClickHandler(event) {
    event.preventDefault();
    copyValues();
    }
    var copyButton = document.getElementById("btn copy");
    copyButton.addEventListener("click", buttonClickHandler);
javascript
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Чтобы скрипт реагировал на выбор даты, нужно добавить обработчик события "change" на input. Попробуйте использовать следующий код:

const options = { day: '2-digit', month: '2-digit', year: 'numeric' };

function formatDate(date) {
return date.toLocaleDateString('ru-RU', options);
}

function copyValues() {
const selectValue = document.getElementById("select").value;
const textareaValue = document.getElementById("textarea").value;
const dateValue = document.getElementById("my-date-input").value;
const clock1Value = document.getElementById("clock1").value;
const clock2Value = document.getElementById("clock2").value;

const formattedDate = formatDate(new Date(dateValue));
const combinedValue = ${selectValue} ${formattedDate} ${clock1Value}-${clock2Value}\n${textareaValue};

navigator.clipboard.writeText(combinedValue);
}

function buttonClickHandler(event) {
event.preventDefault();
copyValues();
}

document.getElementById('my-date-input').addEventListener('change', function() {
const formattedDate = formatDate(new Date(this.value));
document.getElementById('my-date-input').value = formattedDate;
});

const copyButton = document.getElementById("btn copy");
copyButton.addEventListener("click", buttonClickHandler);