convert iso8601 date format to date object

Question

snippet of The date format received I want to display the date in an HTML table but unable to convert the iso8601 type date format to the date object.

$(document).ready(function(){

    var startDate;
    var formattedDate;
    var day;


    $(function(){
        $.ajax({
            url: "http://localhost:8080/employee/101",
            method: "Get",
            success: function(data,status){
                startDate = new Date(data.joinDate);
                day = startDate.dayOfWeek;
                console.log(startDate);
            }   
        });
    });

I get error : invalid date at "console.log(startDate);"

I also need to increment the date but stuck at converting the iso8601 format to a normal date object.

Answer 1

Since you have all it takes out of your employee/101 data response:

 var data = { dayOfMonth: 14, monthValue: 11, // NOVEMBER, we need to -1 it since Date expects 0 based month value year: 2017, } var dateObject = new Date(data.year, data.monthValue - 1, data.dayOfMonth); alert(dateObject) 

On my locale:

Tue Nov 14 2017 00:00:00 GMT+0100 (Central Europe Standard Time)

And BTW startDate.dayOfWeek given startDate is a Date object, you cannot use dayOfWeek like you did.

Answer 2

Thank you for all the help. I finally made it work as below: I was able to display date, though I need a bit more modification to display day and month as ÝYY.But still I think it was good progress.

javascript:

<script type="text/javascript">
    $(document).ready(function(){

        var dateObj;

        $(function(){
            $.ajax({
                url: "http://localhost:8080/employee/101",
                method: "Get",
                success: function(data,status){

                    dateObj = new Date(data.joinDate.year,
                                       data.joinDate.monthValue - 1,
                                       data.joinDate.dayOfMonth);
                    console.log(dateObj);


                $('#timeTable th:not(:first-child)').each(function(){
                if($(this).attr('Id') === 'totalHours') return;
                $(this).text(dateObj.getDate()+'-'+dateObj.getMonth()+'-'+dateObj.getFullYear());
                dateObj.setDate(dateObj.getDate() + 1);
                }); 
            }
            });
        });
    });

</script>

my html table:

<table Id="timeTable" class="table table-bordered">
    <thead>
      <tr>
        <th>Projects</th>
        <th id="mon" style="width:100px"></th>
        <th id="tue" style="width:100px"></th>
        <th id="wed" style="width:100px"></th>
        <th id="thu" style="width:100px"></th>
        <th id="fri" style="width:100px"></th>
        <th id="sat" style="width:100px"></th>
        <th id="sun" style="width:100px"></th>
        <th id="totalHours" style="width:100px"></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Task1</td>
        <td contenteditable='true'></td>
        <td contenteditable='true'>2</td>
        <td contenteditable='true'></td>
        <td contenteditable='true'>3</td>
        <td contenteditable='true'>4</td>
        <td contenteditable='true'> </td>
        <td contenteditable='true'> </td>
        <td contenteditable='true'> </td>
      </tr>
      <tr>
        <td contenteditable='true'>Task2</td>
        <td contenteditable='true' >5</td>
        <td contenteditable='true' >2</td>
        <td contenteditable='true' >2.5</td>
        <td contenteditable='true' >3</td>
        <td contenteditable='true' >4</td>
        <td contenteditable='true' > </td>
        <td contenteditable='true' > </td>
        <td contenteditable='true' > </td>
      </tr>
      <tr>
        <td>Task3</td>
        <td>5</td>
        <td>2</td>
        <td>2.5</td>
        <td>3</td>
        <td>4</td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
    </tbody>
  </table>