Adding Days to a Date value in Jquery

Question

I have a simple drop down that shows the date. Is there a way to get the day e.g Sunday February 2, 2020 to show in the dropdown list rather than just the date, using 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>

Yes, [use this](https://stackoverflow.com/questions/4822852/how-to-get-the-day-of-week-and-the-month-of-the-year). If you have a specific issue you need help to debug, please add your JS to the question. — Rory McCrossan, Jan 09 '20 at 08:41
Added a code snippet to the question, however can't seem to get it to work — user38208, Jan 09 '20 at 09:20

Rory McCrossan · Accepted Answer · 2020-01-09T09:31:11.573

To make this work you can use the getDay() and getMonth() functions of a Date object to get the indexes of the days which you can convert in to their textual values. You can then provide a function to text() which works out the full date for the given option elements and returns the new value. Try this:

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>

Note that the above calculates and formats the full date. You can simplify this to just append the day name, if preferred:

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>

No problem, glad to help. Note that I added another example which only appends the day name instead of calculating and formatting the full date. — Rory McCrossan, Jan 09 '20 at 09:31

score 0 · Answer 2 · answered Jan 09 '20 at 08:42

0

You can by trying: new Date('2020-02-02').getDay()

getDay will return a number between 0-6 and zero will be the the first day of the week according to local time

The 2020-02-02 I used in new Date() was assumed to be available as you set it in your value. You can then have a map between the number and the day string you would like to display

answered Jan 09 '20 at 08:42

DSCH

2,146
1
18
29

Added a code snippet to the question, however can't seem to get it to work – user38208 Jan 09 '20 at 09:20

score 0 · Answer 3 · answered Jan 09 '20 at 08:48

0

I think you are looking for toDateString() function example

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

OUTPUT

Thu Jan 09 2020

answered Jan 09 '20 at 08:48

robertsLando

189
1
4

1

How would you add this so that drop down shows the day value as well? – user38208 Jan 09 '20 at 09:09

score 0 · Answer 4 · answered Jan 09 '20 at 08:49

You can simply convert the date string to date object like below:

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

Or if you have already a date object, you can append it like below

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

The above method dateForSelectValue.getDay() returns an integer from 0 to 6, where 1 is Monday and so on. Thus you can simply write a javascript function returnDayString which return Day name from Day Integer.

Hope that helps

PEPEGA · Answer 5 · 2020-01-09T09:32:17.167

0

You can use toLocaleDateString and provide format and region

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>

edited Jan 09 '20 at 09:32

answered Jan 09 '20 at 09:07

PEPEGA

2,214
20
37

Would this be possible without using moment.js? – user38208 Jan 09 '20 at 09:21
@user38208 Found a way to do it with vanilla js – PEPEGA Jan 09 '20 at 09:32

score 0 · Answer 6 · answered Jan 09 '20 at 09:21

Pure js version- you can iterate though all options and obtain the short date from the option value with

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

then change the option text with the new date format 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>

Adding Days to a Date value in Jquery

6 Answers6