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.

Remove [Object] label in highchart

I'm a newbie in highchart and not familiar with advance javascript functions and I have created a chart with custom x-axis value. Everything works fine but there's a label that annoyed me. There is an [object Object] label in a chart.

See if this helps you
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
title: {
text: ''
},
},
You can change the x-Axis label and also leave it blank if you want it empty.
See the following link for a working example
Highcharts - basic line chart
If any specific help is required please share your src code with us.

The chart looks like this:
100 |
90 |
80 |
70 |
60 |
50 |
40 |
30 |
20 |
10 |
0 -------------------------------------------------------------
[Object 1:00 2:00 3:00 4:00 5:00
Object]

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

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/

highchart: add images to top of chart on every column

Does anyone know if it's possible to create something like this in Highcharts:
It's about the weather icons on the top. I added them as a "scatter graph" which is nice, so the images/graph can be disabled. But I want them always at the top. For example: y=20px or something. Is it possible to do this with Highchart? I know set their data to "30 celcius" but that would mess up the graph if it the temperature would go up to 30 degrees.

You can use a trick of having two x-axes, one with images and offset'ed to the top of the chart and one with the usual labels at the bottom:
xAxis: [{
offset: -290,
tickWidth: 0,
lineWidth: 0,
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
labels: {
x: 5,
useHTML: true,
formatter: function () {
return '<img src="http://highcharts.com/demo/gfx/sun.png"><img> ';
}
}
}, {
linkedTo: 0,
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}],
Full example on jsfiddle

I found a solution by chance because of a logging code I forgot to remove. You can access the data inside the method formatter using "this":
...
plotOptions: {
series: {
dataLabels: {
useHTML: true,
enabled: true,
x: -50,
y: -50,
formatter: function(){
console.log(this);
return '<span>'+this.y+'</span><br/>'+this.series+'<img src="'+this.key+'" />';
},
}
...
This code surely isn't working, but shows up the idea, doesn't it?
Hope it helps!

Given that highcharts is just SVG you can always go directly and manipulate the SVG to show the images you want, usually with just CSS. You can inspect the chart with Chrome's web inspector and find the elements you want to style. I have to warn you though that having customized highcharts myself in the past has made upgrading to newer versions difficult.

You can add another scatter plot to your series that contains specific markers: http://jsfiddle.net/ZZ7Kd/135/

You can use Renderer.image() to add images in any place on chart
http://api.highcharts.com/highcharts#Renderer.image()