0

I need to make Materialize's datepicker display what month the user is currently on. When you select a date with the Materialize datepicker and then switch months, the displayed date remain the selected one.

https://codepen.io/anon/pen/LbVvvN

I have events that are intended to bind to the user changing the month, but the events will only fire once (seemingly because doing so reinitializes the DOM)

$('div.picker__nav--prev').on('click', function() {
    alert('click prev');
    //set the showing date to be a month prior
});

$('div.picker__nav--next').on('click', function() {
    alert('click next');
    //set the showing date to be a month ahead
});

Is there an easy way to implement this kind of event listener and have it work on all clicks?

Steve C
  • 527
  • 1
  • 3
  • 14
  • http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – DaniP Nov 08 '16 at 18:48

1 Answers1

0

Edited :

try 

 $('.datepicker').pickadate({

//START ADD CODE
onRender: function() {
     $('div.picker__nav--next').on('click', function() {
      alert('click next');
    });
     $('div.picker__nav--prev').on('click',  function() {
      alert('click prev');
    });
  },
//END ADD CODE

selectMonths: true,//Creates a dropdown to control month
selectYears: 15,//Creates a dropdown of 15 years to control year
//The title label to use for the month nav buttons
labelMonthNext: 'Next Month',
labelMonthPrev: 'Last Month',
//The title label to use for the dropdown selectors
labelMonthSelect: 'Select Month',
labelYearSelect: 'Select Year',
//Months and weekdays
monthsFull: [ 'January', 'February', 'March', 'April', 'March', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ],
monthsShort: [ 'Jan', 'Feb', 'Mar', 'Apr', 'Mar', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ],
weekdaysFull: [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ],
weekdaysShort: [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ],
//Materialize modified
weekdaysLetter: [ 'S', 'M', 'T', 'W', 'T', 'F', 'S' ],
//Today and clear
today: 'Today',
clear: 'Clear',
close: 'Close',
//The format to show on the `input` element
format: 'dd/mm/yyyy'
});
//Copy settings and initialization tooltipped
ethercreation
  • 1,233
  • 1
  • 9
  • 19