We Keep Coding

materialize pickadate event for changing month

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?

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

datepicker, using parameters

I have a day input, a month input and a year input, and a datepicker which is shown. When clicking an image, I put the day, month and year in each input.
Now my problem is the day, month and year inputs' ids will change dynamically and I would like to specifiy them as parameters:
<input name="dayXX" id="dayXX">
<input name="monthXX" id="monthXX">
<input name="yearXX" id="yearXX">
<input name="calendario" id="calendario" onclick="$(this).openDatepicker();">
<input type="hidden" id="datepicker">
$(function () {
$("#datepicker").datepicker({
firstDay: 0,
monthNames: ['January', 'February', 'March',
'April', 'May', 'June',
'July', 'August', 'September',
'October', 'November', 'December'],
dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
dayNamesShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
dateFormat: 'dd-mm-yy',
});
});
jQuery(function($) {
$.fn.openDatepicker = function() {
$('#datepicker').datepicker('show');
var date = $("#datepicker").datepicker().val();
alert(date);
};
});
XX will change dynamically.
But this is asynchronous and this doesn't return the value to the "openDatepicker" function. How can I call the function and return the value when clicking the date?

This is a bit verbose but you could use classes in this case. I added a wrapper to make it easier to work with:
<div class="pickergroup">
<input class='dayme' name="day" id="day">
<input class='monthme' name="month" id="month">
<input class='yearme' name="year" id="year">
<input class='calendario'>
<input class="hidden datepicker">
</div>
Removed the click handler from markup and put it in code:
$(function() {
$(".pickergroup").find(".datepicker").datepicker({
firstDay: 0,
monthNames: ['January', 'February', 'March',
'April', 'May', 'June',
'July', 'August', 'September',
'October', 'November', 'December'
],
dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
dayNamesShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
dateFormat: 'dd-mm-yy'
});
$('.pickergroup').on('click', '.calendario', function() {
var mycontainer = $(this).parent('.pickergroup');
var dp = mycontainer.find('.datepicker');
dp.show().datepicker('show').hide();//work around hidden element x position
var pdate = dp.datepicker('getDate');
if (pdate) {
var day = pdate.getDate();
var month = pdate.getMonth() + 1;
var year = pdate.getFullYear();
mycontainer.find('.dayme').val(day);
mycontainer.find('.monthme').val(month);
mycontainer.find('.yearme').val(year);
}
});
});
CSS to hide the input for datepicker:
.hidden {
display: none;
}
EDIT: Added fiddle: https://jsfiddle.net/MarkSchultheiss/mct4owch/
I added the onSelect so you could see it as it IS selected:
$(function() {
$(".pickergroup").find(".datepicker").datepicker({
onSelect: function(dateText, dpInst) {
var mycontainer = $(this).parent('.pickergroup');
console.log(dateText);
var pdate = $(this).datepicker("getDate");
if (pdate) {
var day = pdate.getDate();
var month = pdate.getMonth() + 1;
var year = pdate.getFullYear();
mycontainer.find('.dayme').val(day);
mycontainer.find('.monthme').val(month);
mycontainer.find('.yearme').val(year);
}
},
firstDay: 0,
monthNames: ['January', 'February', 'March',
'April', 'May', 'June',
'July', 'August', 'September',
'October', 'November', 'December'
],
dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
dayNamesShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
dateFormat: 'dd-mm-yy'
});
$('.pickergroup').on('click', '.calendario', function() {
var mycontainer = $(this).parent('.pickergroup');
var dp = mycontainer.find('.datepicker');
dp.show().datepicker('show').hide(); //work around hidden element x position
var pdate = dp.datepicker('getDate');
if (pdate) {
var day = pdate.getDate();
var month = pdate.getMonth() + 1;
var year = pdate.getFullYear();
mycontainer.find('.dayme').val(day);
mycontainer.find('.monthme').val(month);
mycontainer.find('.yearme').val(year);
}
});
});

You can use the jQuery starts-with selector syntax to find the IDs.
$('id^=day').val($('id^=day').val()+selectedDay);
$('id^=month').val($('id^=month').val()+selectedMonth);
$('id^=year').val($('id^=year').val()+selectedYear);
As a reminder, the starts-with selector will find all HTML elements whose ID starts with that text so it's important to make sure that there is only one element with an ID that starts with 'day', 'month' and 'year' otherwise you may get unexpected results.
Reference: jQuery starts with selector

AngularJS how can select value from ng-options

i am inserting value in select ng-options and i want to select in dropdown for particular month.
this is return all 12 month arrray, so how can i fetch only selected month from dropdown.
Script:
$scope.Month = ['Jan', 'Feb', 'March', 'April', 'May', 'June', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
$scope.selectmonth = $scope.Month;
$scope.SaveReport = function () {
PrintReportRepository.save(
{
SelectMonth: $scope.selectmonth,
},
html
<select class="form-control" ng-model="selectmonth" ng-options ="months as months for months in Month">{{months}}</select>

For setting first item selected use $scope.selectmonth = $scope.Month[0], by setting $scope.selectmonth = $scope.Month U setting whole array as a model

use this code: see plunker
controller:
$scope.Month = ['Jan', 'Feb', 'March', 'April', 'May', 'June', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
$scope.SaveReport = function () {
console.log('SelectMonth', $scope.selectmonth);
}
html:
<select class="form-control" ng-model="selectmonth" ng-options ="months as months for months in Month" ng-change="SaveReport()"></select>

How to create Jquery month select calender

I want a jquery month select calender. can anyone give me a website link or steps how to create month view calender like this image. please help me

Fiddle : Enjoy this : http://jsfiddle.net/abdennour/pyS99/
options = {
pattern: 'yyyy-mm', // Default is 'mm/yyyy' and separator char is not mandatory
selectedYear: 2010,
startYear: 2008,
finalYear: 2012,
monthNames: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']
};
$('#custom_widget').monthpicker(options);
Source :
http://lucianocosta.info/jquery.mtz.monthpicker/

Display 'Full-month-name yyyy' with eyecon bootstrap datepicker

I'm trying to display full month name like 'January 2014' with eyecon Bootstrap datepicker http://www.eyecon.ro/bootstrap-datepicker/ Does anybody know if it's possible? I've tried everything I know (I'm a junior in JS).

I know this is little old thread. But I came across this when I was searching for similar behavior. As I couldn't find such feature natively, patched some code snippets to get that work.
http://jsfiddle.net/saz52h11/
The changes are:
var monthnames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
----
case 'mmm':
date.setMonth(monthnames.indexOf(val));
----
mmm:monthnames[date.getMonth()]
----
val.mmm = monthnames[val.m-1];
Hope this helps

This works fine:
$("#datepicker").datepicker( {
format: "MMMM YYYY",
startView: 1,
minViewMode: 1
});
Change the format field to 'MMMM' instead of 'mm' and it will provide full month. If you use "MMM" it will show the three character abreviation for the month.

You can try this:
$("#datepicker").datepicker( {
format: "mm-yyyy",
viewMode: "months",
minViewMode: "months"
});
also notice that in the version of 1.2.0 the viewMode has changed to startView.
Update:
Refer This Demo