We Keep Coding

Vanilla JS Datepicker

I'm trying to get Vanilla JS Datepicker to work :
https://github.com/mymth/vanillajs-datepicker
It's throwing an error: TypeError: undefined is not an object on e.dataset.date
That's an error down in the date picker code, so I'm not sure what's wrong.
Here's my callout in a function:
function setDate() {
console.log('DatePickerCk: ' , Datepicker); // shows as 'class ue' - that doesn't seem right
var cdate = $(mycell).attr('dc-oldval');
console.log('CurDate: ' + cdate); // ok - 02/07/2020
var dpelem = $(mycell).find('input');
$(dpelem).val(cdate);
console.log('ValofInput: ' , $(dpelem).val()); // ok - "02/07/2020"
console.log('DpElem: ' , dpelem); // ok - hovering over it in console highlights the element in the DOM
var datepicker = new Datepicker(dpelem, {
autohide: true,
daysOfWeekDisabled: [],
daysOfWeekHighlighted: [],
defaultViewDate: cdate,
nextArrow: '>>',
prevArrow: '<<',
todayBtn: false,
todayBtnMode: 1,
todayHighlight: true
});
Datepicker.locales.en = {
days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
today: 'Today',
clear: 'Clear',
titleFormat: 'MM y',
format: 'dd/mm/yyyy',
weekstart: 0
}
}
setDate();
I see the date in the input, but the dropdown for the datepicker doesn't show.
Did I not call it correctly? I'm not sure what the problem is.

This is a shot in the dark, but what happens if you add [0] to your dpelem when setting up your Datepicker? It looks like you're getting a jquery element vs a DOM element like it's probably expecting.
var datepicker = new Datepicker(dpelem[0]....
I don't really see anything wrong with your code otherwise. I threw together a quick little jsfiddle and it seems fine assuming you've got a valid reference to your input element.

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

How to disable future month and year in monthpicker

I am using month picker, i want to restrict users from selecting future month and year. How can I achieve that ?
I tried using
$("#month").monthpicker({ dateFormat: 'M-yy',
autoSize: true,
changeYear: true,
changeMonth: true,
showButtonPanel: true,
maxDate: new Date().getMonth()
});
but with this i could only restrict future year, i can still select future month. Any help will be appreciated.

By default, the year range starts 10 years ago and ends on 10 years from now, having the current year selected.
This and other settings can be overwritten on widget initialization:
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);
You can try this. This is working for me.
$('#my_widget').monthpicker('disableMonths', [1, 2, 11, 12]);
$('#my_widget').monthpicker('disableMonths', []); // re-enables all months
Reference From : Month Picker Jquery

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>

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