Autodivide / create month headers for list of dates

Autodivide / create month headers for list of dates

Has anyone any idea on how to complete any of the following using Jquery:

Go through a list of dates

e.g.

  1. <ul>
  2. <li>10/07/2014</li>
  3. <li>20/07/2014</li>
  4. <li>11/08/2014</li>
  5. <li>21/08/2014</li>
  6. <li>11/09/2014</li>
  7. <li>22/09/2014</li>
  8. </ul>
and automatically add the month headers (July, August, September) to delineate each month in the list.

Ideally this would simply add an extra <li>MONTH</li> just before the first date in each month.

If this can't be completed after the list has been rendered I've got the option of completing during a JS function which sorts the date from a JSON import:

  1. function sortJsonDate(a,b){
  2.                $adate = Date.parse(a.keydate);
  3.                $bdate = Date.parse(b.keydate);
  4.      return $adate > $bdate  ? 1 : -1;    
  5.    };
Would it be possible to insert the month headers during the date sort? i.e. Add an extra date instance for start of the month before the first event in each month.