CODEWITHSUNDEEP
phpjquerylisttraversal
loneTraceur
loneTraceur

Reputation: 100

PHP / JQuery step through a list of months

I'm trying to display a single entry of the current month & year which has an up / down arrow that allows you to move to the next or previous month / year.

Using PHP I've created a UL list from two arrays (months & years) that contains all of the entries I need, but now I can't figure out how to display a single entry that can step back or forth through the list. Any suggestions on where to look with JQuery?

The PHP is:

$month_list = array('JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC');
$year_list = array('2014', '2015', '2016', '2017', '2018', '2019', '2020');

for ($years=0; $years!=count($year_list); $years++) {
   for ($months=0; $months!=count($month_list); $months++) {    
        echo '<li class="cal_month" >'.$month_list[$months].
             '<div class="year">'.$year_list[$years].'</div></li>';
    }
}

Upvotes: 0

Views: 84

Answers (1)

Charleshaa
Charleshaa

Reputation: 2238

Yes, have an HTML like that :

<span id="curr-month">JAN</span> <span id="curr-year">2014</span>
<a href="#" class="changer" data-target="month">month change</a>
<a href="#" class="changer" data-target="year">year change</a>

Have your arrays in jQuery:

$('body').on('click', '.changer', function(e){
  var target = $(this).data('target');
  var dates = {
        month: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
        year: ['2014', '2015', '2016', '2017', '2018', '2019', '2020']
      },
      index = dates[target].indexOf($('#curr-'+target).text());
  var toIndex = (index >= dates[target].length - 1 ) ? 0 : index + 1;
  $('#curr-'+target).text(dates[target][toIndex]);

});

Here's a fiddle : http://jsfiddle.net/kbfj9nwf/1/

Upvotes: 1

Related Questions