Добавление дней к значению даты в Jquery - PullRequest
Новая
       2

Добавление дней к значению даты в Jquery

3 голосов
/ 09 января 2020

У меня есть простой выпадающий список, который показывает дату. Есть ли способ получить день, например, Sunday February 2, 2020 для отображения в раскрывающемся списке, а не только дату, используя jQuery? 

var options = document.getElementsByTagName('.date option');
for (i = 0; i < options.length; ++i) {
  options[i].innerHTML = options[i].getDay()
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="date">
  <select name="tour-date">
    <option value="2020-02-02" selected="">February 2, 2020</option>
    <option value="2020-02-09">February 9, 2020</option>
    <option value="2020-02-16">February 16, 2020</option>
    <option value="2020-02-23">February 23, 2020</option>
    <option value="2020-03-01">March 1, 2020</option>
    <option value="2020-03-08">March 8, 2020</option>
    <option value="2020-03-15">March 15, 2020</option>
    <option value="2020-03-22">March 22, 2020</option>
    <option value="2020-03-29">March 29, 2020</option>
    <option value="2020-04-05">April 5, 2020</option>
    <option value="2020-04-12">April 12, 2020</option>
    <option value="2020-04-19">April 19, 2020</option>
    <option value="2020-04-26">April 26, 2020</option>
    <option value="2020-05-03">May 3, 2020</option>
    <option value="2020-05-10">May 10, 2020</option>
    <option value="2020-05-17">May 17, 2020</option>
    <option value="2020-05-24">May 24, 2020</option>
    <option value="2020-05-31">May 31, 2020</option>
    <option value="2020-06-07">June 7, 2020</option>
    <option value="2020-06-14">June 14, 2020</option>
    <option value="2020-06-21">June 21, 2020</option>
    <option value="2020-06-28">June 28, 2020</option>
    <option value="2020-07-05">July 5, 2020</option>
    <option value="2020-07-12">July 12, 2020</option>

  </select>


</div>

Ответы [ 6 ]

1 голос
/ 09 января 2020

Чтобы сделать это, вы можете использовать функции getDay() и getMonth() объекта Date, чтобы получить индексы дней, которые вы можете преобразовать в их текстовые значения. Затем вы можете предоставить text() функцию, которая вычисляет полную дату для заданных элементов option и возвращает новое значение. Попробуйте это: 

var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

$('.date option').text(function() {
  var d = new Date($(this).val());
  return `${days[d.getDay()]} ${months[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="date">
  <select name="tour-date">
    <option value="2020-02-02" selected="">February 2, 2020</option>
    <option value="2020-02-09">February 9, 2020</option>
    <option value="2020-02-16">February 16, 2020</option>
    <option value="2020-02-23">February 23, 2020</option>
    <option value="2020-03-01">March 1, 2020</option>
    <option value="2020-03-08">March 8, 2020</option>
    <option value="2020-03-15">March 15, 2020</option>
    <option value="2020-03-22">March 22, 2020</option>
    <option value="2020-03-29">March 29, 2020</option>
    <option value="2020-04-05">April 5, 2020</option>
    <option value="2020-04-12">April 12, 2020</option>
    <option value="2020-04-19">April 19, 2020</option>
    <option value="2020-04-26">April 26, 2020</option>
    <option value="2020-05-03">May 3, 2020</option>
    <option value="2020-05-10">May 10, 2020</option>
    <option value="2020-05-17">May 17, 2020</option>
    <option value="2020-05-24">May 24, 2020</option>
    <option value="2020-05-31">May 31, 2020</option>
    <option value="2020-06-07">June 7, 2020</option>
    <option value="2020-06-14">June 14, 2020</option>
    <option value="2020-06-21">June 21, 2020</option>
    <option value="2020-06-28">June 28, 2020</option>
    <option value="2020-07-05">July 5, 2020</option>
    <option value="2020-07-12">July 12, 2020</option>
  </select>
</div>

Обратите внимание, что приведенное выше вычисляет и форматирует полную дату. Вы можете упростить это, добавив название дня, если хотите: 

var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

$('.date option').text(function(i, t) {
  return `${days[new Date($(this).val()).getDay()]} ${t}`;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="date">
  <select name="tour-date">
    <option value="2020-02-02" selected="">February 2, 2020</option>
    <option value="2020-02-09">February 9, 2020</option>
    <option value="2020-02-16">February 16, 2020</option>
    <option value="2020-02-23">February 23, 2020</option>
    <option value="2020-03-01">March 1, 2020</option>
    <option value="2020-03-08">March 8, 2020</option>
    <option value="2020-03-15">March 15, 2020</option>
    <option value="2020-03-22">March 22, 2020</option>
    <option value="2020-03-29">March 29, 2020</option>
    <option value="2020-04-05">April 5, 2020</option>
    <option value="2020-04-12">April 12, 2020</option>
    <option value="2020-04-19">April 19, 2020</option>
    <option value="2020-04-26">April 26, 2020</option>
    <option value="2020-05-03">May 3, 2020</option>
    <option value="2020-05-10">May 10, 2020</option>
    <option value="2020-05-17">May 17, 2020</option>
    <option value="2020-05-24">May 24, 2020</option>
    <option value="2020-05-31">May 31, 2020</option>
    <option value="2020-06-07">June 7, 2020</option>
    <option value="2020-06-14">June 14, 2020</option>
    <option value="2020-06-21">June 21, 2020</option>
    <option value="2020-06-28">June 28, 2020</option>
    <option value="2020-07-05">July 5, 2020</option>
    <option value="2020-07-12">July 12, 2020</option>
  </select>
</div>
0 голосов
/ 09 января 2020

Pure js версия - вы можете перебрать все опции и получить короткую дату из значения опции с помощью 

var dateValueFromOption = new Date(optionValue);
var stringDateFromOption = dateValueFromOption.toDateString();

, а затем изменить текст опции на новый формат даты stringDateFromOption 

var dropDownElement = document.getElementById("tour-date")
const dropDownOptions = dropDownElement.options;

for (i = 0; i < dropDownOptions.length; i++) {

  //optional, maybe you will need the ids at something else
  let dropDownOptionId = dropDownElement.options[i].id;
  dropDownOptionId = "option_" + i;

  const optionValue = dropDownOptions[i].value;

  var dateValueFromOption = new Date(optionValue);
  var stringDateFromOption = dateValueFromOption.toDateString();

  dropDownOptions[i].text = stringDateFromOption
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="tour-date" name="tour-date">
  <option value="2020-02-02" selected=""></option>
  <option value="2020-02-09"></option>
  <option value="2020-02-16"></option>
  <option value="2020-02-23"></option>
  <option value="2020-03-01"></option>
</select>
0 голосов
/ 09 января 2020

Вы можете использовать toLocaleDateString и указать формат и регион 

var format = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
var options = document.getElementsByTagName('option');

for (i = 0; i < options.length; ++i)
 options[i].innerHTML = new Date(options[i].value).toLocaleDateString("en-US", format);
<select name="tour-date">
  <option value="2020-02-02" selected=""></option>
  <option value="2020-02-09"></option>
  <option value="2020-02-16"></option>
  <option value="2020-02-23"></option>
  <option value="2020-03-01"></option>
</select>
0 голосов
/ 09 января 2020

Вы можете просто преобразовать строку даты в объект даты, как показано ниже: 

var dateForSelectValue = new Date('2020-01-07');

Или, если у вас уже есть объект даты, вы можете добавить его, как показано ниже 

returnDayString(dateForSelectValue.getDay()) + '' + dateForSelectValue.getDate() + ',' + dateForSelectValue.getFullYear();

Приведенный выше метод dateForSelectValue.getDay() возвращает целое число от 0 до 6, где 1 - понедельник и т. д. Таким образом, вы можете просто написать javascript функцию returnDayString, которая return Название дня от Day Integer.

Надеюсь, что поможет

0 голосов
/ 09 января 2020

Я думаю, что вы ищете toDateString() функция пример 

var d = new Date();
var n = d.toDateString();
console.log(n)

ВЫХОД 

Thu Jan 09 2020
0 голосов
/ 09 января 2020

Вы можете попытаться: new Date('2020-02-02').getDay()

getDay вернет число от 0 до 6, и ноль будет первым днем ​​недели по местному времени

2020-02-02 Я использовал в new Date() предполагалось, что он будет доступен, если вы установите его в качестве значения. После этого вы можете получить карту между числом и строкой дня, которую вы хотите отобразить

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...