date formatting issues. js jquery

Question

Date formatting issues after July.the date shown is a weekly format. any help will be highly appreciated.the date is working fine just that not working as expected

$(document).ready(function () {
        var curr = new Date; // get current date
        var first = curr.getDate() - curr.getDay(); // First day is the day of the month - the day of the week
        var last = first + 6; // last day is the first day + 6
        var startDate = new Date(curr.setDate(first));
        startDate = ((startDate.getMonth() + 1) < 10 ? '0'
                : '')
                + (startDate.getMonth() + 1)
                + "/"
                + ((startDate.getDate() < 10 ? '0' : '') + startDate
                        .getDate())
                + "/"

When you work with native Date object in JavaScript, you need to make some additional calculations. They are not nessasary if you are using Moment.js library. It makes your development much more comfortable. So, if you are going to work with date manipulation further in this or other projects, I recommend you to start using Moment.js right now. — alexfrize
– alexfrize, Commented Aug 2, 2017 at 1:04

Vindhyachal Kumar · Accepted Answer · 2017-08-02 01:39:44Z

2

just change this code

 var endDate = new Date(startDate);
 endDate.setDate(startDate.getDate() + 6);

You can check below working code.

   

$(document).ready(function () {
        //var curr = new Date('2020-02-29'); // for leap
        var curr = new Date();// get current date
        var first = curr.getDate() - curr.getDay(); // First day is the day of the month - the day of the week
        var startDate = new Date(curr.setDate(first));
        var endDate = new Date(startDate);
        endDate.setDate(startDate.getDate() + 6);
        startDate = ((startDate.getMonth() + 1) < 10 ? '0'
                : '')
                + (startDate.getMonth() + 1)
                + "/"
                + ((startDate.getDate() < 10 ? '0' : '') + startDate
                        .getDate())
                + "/"
                + startDate.getFullYear();

        endDate = ((endDate.getMonth() + 2) < 10 ? '0' : '')
        //this might have some flaws if i make it to 2 it works but this is short term fix and will break again
                + (endDate.getMonth() + 1)
                + "/"
                + ((endDate.getDate() < 10 ? '0' : '') + endDate
                        .getDate())
                + "/"
                + endDate.getFullYear();

        document.getElementById("ok").innerHTML = startDate;
        document.getElementById("napa").innerHTML = endDate;

        $(".next")
                .click(
                        function () {
                            document.getElementById("tabletbody").innerHTML = "";
                            var startdt = new Date($('#ok')
                                    .text());
                            startdt.setDate(startdt
                                    .getDate() + 7);
                            document.getElementById("ok").innerHTML = (getDateFormat(startdt));

                            var enddt = new Date($('#napa')
                                    .text());
                            enddt
                                    .setDate(enddt
                                            .getDate() + 7);
                            document.getElementById("napa").innerHTML = (getDateFormat(enddt));
                            updateCompass();

                            return false;

                        });

        function getDateFormat(d) {
            var month = ((d.getMonth() + 1) < 10 ? '0' : '')
                    + (d.getMonth() + 1);
            var dd = (d.getDate() < 10 ? '0' : '')
                    + d.getDate();
            return month + "/" + dd + "/" + d.getFullYear();

        }

        $(".previous").click(function () {
            document.getElementById("tabletbody").innerHTML = "";
            var startdt = new Date($('#ok').text());
            startdt.setDate(startdt.getDate() - 7);

            $('#ok').text(getDateFormat(startdt));
            var enddt = new Date($('#napa').text());
            enddt.setDate(enddt.getDate() - 7);

            $('#napa').text(getDateFormat(enddt));
            updateCompass();

            return false;
        });
    });

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div id="ok"></div>
<div id="napa"></div>

edited Aug 2, 2017 at 1:39

answered Aug 2, 2017 at 1:00

Vindhyachal Kumar

1,8002 gold badges24 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

david Over a year ago

I had a code that worked till July 31st, do you think adding if condition will solve any date issues forever(leap year , 5 weeks month......)?

Vindhyachal Kumar Over a year ago

let me check it

david Over a year ago

thx please let me know if this code will be perfect on the long run!

Vindhyachal Kumar Over a year ago

I have updated the code and test with leap year 2020-02-29

david Over a year ago

thx a lot @vindhyachal working good, I hope this code will not break.

Collectives™ on Stack Overflow

date formatting issues. js jquery

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related