I have highcharts that I am trying to internationalize. I Currently they are set default
defaultOptions ={...
lang: {
loading: 'Loading...',
months: ['January', 'February', 'March', 'April', 'May', 'June', 'July',
'August', 'September', 'October', 'November', 'December'],
...}
I have a properties file, and a method that writes what is in my properties.
methodtowrite['highcharts.months.array']();
but when i do something like
lang:{
loading: methodtowrite['highcharts.months.loading']();
months: methodtowrite['highcharts.months.array']();
}
the chart doesnt show up. I have a feeling i'm inserting the methodtowrite the wrong way. methodtowrite works fine and is correctly coded. i am using it in other JS files.
Try changing the semi-colons to commas. e.g
lang:{
loading: methodtowrite['highcharts.months.loading'](),
months: methodtowrite['highcharts.months.array']()
}
Check that methodtowrite'highcharts.months.loading' returns a string and methodtowrite'highcharts.months.array' returns an array.
Example: http://jsfiddle.net/8ZurX/
Related
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.
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
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
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>
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/