Show date variable for each div with class name

Question

UPDATED: The code below works to show dates 7 and 14 days from today. How can we shorten the output to just show the month and day (Sep 21)?

How do show the dates (innerHTML) for every class name on the page?

var date = new Date,
  firstDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 7),
  next = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 14),
  months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep",
    "Oct", "Nov", "Dec"
  ];

$('.first-date').html(function(_, val) {
 return val + firstDate;
});
$('.second-date').html(function(_, val) {
 return val + next;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<span class="first-date"></span> - <span class="second-date"></span>
<br/><br/>
<span class="first-date"></span> - <span class="second-date"></span>

JSFiddle: https://jsfiddle.net/dzb2okv3/1/

Seeing as your code makes no sense at all, and is full of syntax errors (and other errors), it's somewhat strange that it works at all ? — adeneo, Sep 21 '16 at 20:57
Make a firm decision whether you want to play with `class` or `id` — Rayon, Sep 21 '16 at 20:58
OP, What are we reading? Javascript would be a generous term — The One and Only ChemistryBlob, Sep 21 '16 at 20:59
1) You're missing some of your code, and 2) You don't have to do that goofy check before setting the html. You can do `$('selector').html('new value')` and jQuery won't thrown an error if the selector doesn't select anything. Aside from that, you want different dates in the different sets of spans, no? Where will those values come from? — Jason P, Sep 21 '16 at 21:28
Edited the code. It's a mess, expanded from minified version. Same dates will be shown in the multiple spans in different locations on the page. — trying_to_learn, Sep 21 '16 at 21:34
I don't get why are you mixing up `jQuery` with `Vanilla JS`. Choose a path and go for it. — emerson.marini, Sep 21 '16 at 21:39
What about all those commas? Are you sure you don't have loads of errors in the browser console? Hit F12. — emerson.marini, Sep 21 '16 at 21:41
Yes, like this: https://jsfiddle.net/dzb2okv3/ BUT, just showing the Month and Day (Sep 21), not: Wed Sep 28 2016 00:00:00 GMT-0700 (PDT) — trying_to_learn, Sep 21 '16 at 21:49
Possible duplicate of [Where can I find documentation on formatting a date in JavaScript?](http://stackoverflow.com/questions/1056728/where-can-i-find-documentation-on-formatting-a-date-in-javascript) — Heretic Monkey, Sep 21 '16 at 22:19

Aya Salama · Accepted Answer · 2016-09-21T23:19:27.653

You can try this

var  months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep",
    "Oct", "Nov", "Dec"];
var dateObj = new Date();
var dateObj_7 = new Date(dateObj.getFullYear(), dateObj.getMonth(), dateObj.getDate() + 7 );
var dateObj_14 = new Date(dateObj.getFullYear(), dateObj.getMonth(), dateObj.getDate() + 14 );
var month_7 = dateObj_7.getMonth(); //months from 1-12
var month_14 = dateObj_14.getMonth();
var day_7 = dateObj_7.getDate();
var day_14 = dateObj_14.getDate();
var next_7_date =  months[month_7] + " " + day_7;
var next_14_date =  months[month_14] + " " + day_14;

$('.first-date').html( next_7_date);
$('.second-date').html( next_14_date);

// if you want to get day in 2 digits (01, 02, 03 ...etc)
/*
var day_7 = ("0" + dateObj_7.getDate()).slice(-2);
var day_14 = ("0" + dateObj_14.getDate()).slice(-2);
*/

Demo

Show date variable for each div with class name

1 Answers1