Develop Reference

Change object label on specific value in js

I'm working on charts in React.js and i want to display data sorted by month. In django i've created view for displaying json with total events per month and it looks like this:
[
{
"month": "2022-06-01T00:00:00+02:00",
"total": 4
},
{
"month": "2022-08-01T00:00:00+02:00",
"total": 1
}
]
]
I would like to sort every object in that array and change value 'month' from numbers to month name, so it would be:
[
{
"month": "june",
"total": 4
},
{
"month": "august",
"total": 1
}
]
]
For generating charts i'm using chartist.

You could store the full date as a seperate key (called date), and set the month in a seperate function using a predefined array for the names of each month. Here is the code you would use:
const monthName = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"]; // Array representing each month
var chartItems = [
{
"date": "2022-06-01T00:00:00+02:00",
"month": null,
"total": 4
},
{
"date": "2022-08-01T00:00:00+02:00",
"month": null,
"total": 1
}
];
// Run through each item in the array
function setMonths(arr) {
arr.forEach(item => {
const date = new Date(item.date); // Convert date string to Date object
const monthIndex = date.getMonth(); // Get index of month from the Date
const month = monthName[monthIndex]; // Convert index into text representing the month
item.month = month; // Set the month key in the object to the new month
});
}
setMonths(chartItems); // Call function to set months in the array
As an alternative, you could also make a method for each object in the array that gets the month, but you would need to run this everytime you want to get the month. Here is the code for that:
const monthName = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"];
var chartItems = [
{
"date": "2022-06-01T00:00:00+02:00",
"month": function() { return monthName[new Date(this.date).getMonth()]; },
"total": 4
},
{
"date": "2022-08-01T00:00:00+02:00",
"month": function() { return monthName[new Date(this.date).getMonth()]; },
"total": 1
}
];
And you would get it like this:
chartItems[0].month(); // "[0]", meaning the first item in the array

how to check the indexes of an array with external values to generate a new one?

I have an array and 2 variables. The two variables are numbers and the array contains 12 values.
const firstParam = 6;
const secondParam = 0;
originalArray = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
I want to take the numbers and check that index of the second array matches and then change the value of the matching ones.
In this case the output would be
newArray = ["blank", "February", "March", "April", "May", "June", "blank", "August", "September", "October", "November", "December"];
I was trying with map but it's not applied
const newArray = originalArray.map((element, index) => firstParam ? null : element);
How can I do it?
Is there any better way to get the desired result?
thanks for your help

You could take an array for the indices and check the index with Array#includes and return either a new value of the old value.
const
indices = [6, 0],
originalArray = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
result = originalArray.map((v, i) => indices.includes(i) ? 'blank' : v);
console.log(...result);

Bootstrap datepicker error when using other language: Uncaught TypeError: Cannot read property 'length' of undefined

I'm using the datepicker from Bootstrap (http://bootstrap-datepicker.readthedocs.org/en/latest/i18n.html). When using datepicker without the "language" property, it works, but when I try to specify a language ("sv"), it fails with the message (i.e when trying to select a date in the widget):
Uncaught TypeError: Cannot read property 'length' of undefined
These are the versions I'm using:
jQuery v1.8.3
jQuery UI 1.8.22
Boostrap 2.3.1
From looking at the debugger it seems that this is the code that crashes (Datetimepicker.prototype, the row with "p: "):
formatDate: function (date, format, language, type) {
if (date == null) {
return '';
}
var val;
if (type == 'standard') {
val = {
// year
yy: date.getUTCFullYear().toString().substring(2),
yyyy: date.getUTCFullYear(),
// month
m: date.getUTCMonth() + 1,
M: dates[language].monthsShort[date.getUTCMonth()],
MM: dates[language].months[date.getUTCMonth()],
// day
d: date.getUTCDate(),
D: dates[language].daysShort[date.getUTCDay()],
DD: dates[language].days[date.getUTCDay()],
p: (dates[language].meridiem.length == 2 ? dates[language].meridiem[date.getUTCHours() < 12 ? 0 : 1] : ''),
// hour
h: date.getUTCHours(),
// minute
i: date.getUTCMinutes(),
// second
s: date.getUTCSeconds()
};
This is the working code (a widget in english):
var dates = $('#date-picker input[name=from_date], .facet-container input[name=to_date]').datetimepicker({
format: 'yyyy-mm-dd',
autoclose:'true',
todayBtn:'true',
pickerPosition:'bottom-left',
minView:'month'
}).on('changeDate', function(ev){
});
This crashes:
$.fn.datetimepicker.dates['sv'] = {
days: ["Söndag", "Måndag", "Tisdag", "Onsdag", "Torsdag", "Fredag", "Lördag"],
daysShort: ["Sön", "Mån", "Tis", "Ons", "Tor", "Fre", "Lör"],
daysMin: ["Sö", "Må", "Ti", "On", "To", "Fr", "Lö"],
months: ["Januari", "Februari", "Mars", "April", "Maj", "Juni", "Juli", "Augusti", "September", "Oktober", "November", "December"],
monthsShort: ["Jan", "Feb", "Mar", "Apr", "Maj", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"],
today: "Idag",
clear: "Rensa"
};
var dates = $('#date-picker input[name=from_date], .facet-container input[name=to_date]').datetimepicker({
format: 'yyyy-mm-dd',
autoclose:'true',
weekStart: 1,
language:'sv',
todayBtn:'true',
pickerPosition:'bottom-left',
minView:'month'
}).on('changeDate', function(ev){
});
What could be the problem??

This fixed it, i.e had to add a "meridiem" property:
$.fn.datetimepicker.dates['sv'] = {
days: ["Söndag", "Måndag", "Tisdag", "Onsdag", "Torsdag", "Fredag", "Lördag"],
daysShort: ["Sön", "Mån", "Tis", "Ons", "Tor", "Fre", "Lör"],
daysMin: ["Sö", "Må", "Ti", "On", "To", "Fr", "Lö"],
months: ["Januari", "Februari", "Mars", "April", "Maj", "Juni", "Juli", "Augusti", "September", "Oktober", "November", "December"],
monthsShort: ["Jan", "Feb", "Mar", "Apr", "Maj", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"],
meridiem: '',
today: "Idag",
clear: "Rensa"
};

{{value}} is not getting resolved in IE

JSON:
[
{
"1": "January",
"2": "February",
"8": "August",
"9": "Septemeber",
"10": "October",
"11": "November",
"12": "December"
},
{
"2": "February",
"3": "March",
"4": "April",
"5": "May",
"6": "June",
"7": "July",
"8": "August"
}
]
HTML:
<select class='W1_Normal V4 A_{{$parent.$index}}' style="width:100px;" id="A_{{$parent.$index}}_{{$index}}" name="A_{{$parent.$index}}_{{$index}}" onchange="modifiyOtherDropDowns(this);removeErrorMessagesOfAllLowerDivsUsingObj(this)">
<option value=""></option>
<option ng-repeat="(key, value) in ap" value="{{key}}">{{value}}</option>
</select>
In Firefox and Chrome, above written code is working fine, {{value}} is getting resolved corresponding value. But in IE {{value}} is getting showed as {{value}}!
UPDATE:Problem specific to IE8

You should read this article about using Angular with IE8 and earlier. There are some tricks you need to know about. Whenever I target IE8 with Angular, I avoid writing element directives and stick with attribute directives instead.

Change language for bootstrap DateTimePicker

I use bootstrap-datetimepicker.js Copyright 2012 by Stefan Petre
http://www.malot.fr/bootstrap-datetimepicker/index.php
I import the js and another language, for example Russian:
<script type="text/javascript"
src="/Resources/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript"
src="/Resources/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.ru.js" charset="UTF-8"></script>
in document.ready
$(document).ready(function () {
// debugger;
$(".form_datetime").datetimepicker({
isRTL: false,
format: 'dd.mm.yyyy hh:ii',
autoclose:true
});
});
but it is not translated
I tried to insert on init
**language: "RU"**
**language: "ru"**
**language: "ru-RU"**
but nothing changes,
Do you have any proposal?

i think you have to set it in the options:
$(".form_datetime").datetimepicker({
isRTL: false,
format: 'dd.mm.yyyy hh:ii',
autoclose:true,
language: 'ru'
});
if its not working, be sure that:
$.fn.datetimepicker.dates['en'] = {
days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
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"
};
is defined for 'ru'

If you use moment.js the you need to load moment-with-locales.min.js not moment.min.js. Otherwise, your locale: 'ru' will not work.

you need to add the javascript language file,after the moment library, example:
<script type="text/javascript" src="js/moment/moment.js"></script>
<script type="text/javascript" src="js/moment/es.js"></script>
now you can set a language.
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({locale:'es'});
});
</script>
Here are all language: https://github.com/moment/moment

The option is locale: 'ru'
But first, you have to call the script ../moment.js/version/locale/ru.js
Hope this helps.

Just include your desired locale after the plugin. You can find it in locales folder on github https://github.com/uxsolutions/bootstrap-datepicker/tree/master/dist/locales
<script src="bootstrap-datepicker.XX.js" charset="UTF-8"></script>
and then add option
$('.datepicker').datepicker({
language: 'XX'
});
Where XX is your desired locale like ru

1.you will use different locale array element in datepicker.js from following link
https://github.com/smalot/bootstrap-datetimepicker/tree/master/js/locales
2.add array in datepicker.js like this:
$.fn.datepicker.Constructor = Datepicker;
var dates = $.fn.datepicker.dates = {
en: {
days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
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"
},
CN:{
days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],
months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
today: "今天",
suffix: [],
meridiem: ["上午", "下午"]
}
};

1.First add this js file to your HTML.
<script th:src="#{${webLinkFactory.jsLibRootPath()}+'/bootstrap-datepicker.nl.min.js'}" charset="UTF-8"type="text/javascript"></script>
obviously after moment.min.js.
content of bootstrap-datepicker.nl.min.js will be
;(function($){
$.fn.datepicker.dates['nl'] = {
days: ["Zondag", "Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag", "Zondag"],
daysShort: ["Zon", "Man", "Din", "Woe", "Don", "Vri", "Zat", "Zon"],
daysMin: ["Zo", "Ma", "Di", "Wo", "Do", "Vr", "Za", "Zo"],
months: ["Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"],
monthsShort: ["Jan", "Feb", "Mrt", "Apr", "Mei", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"],
today: "Vandaag",
suffix: [],
meridiem: []
};
$.fn.datetimepicker.dates['nl'] = {
days: ["Zondag", "Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag", "Zondag"],
daysShort: ["Zon", "Man", "Din", "Woe", "Don", "Vri", "Zat", "Zon"],
daysMin: ["Zo", "Ma", "Di", "Wo", "Do", "Vr", "Za", "Zo"],
months: ["Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"],
monthsShort: ["Jan", "Feb", "Mrt", "Apr", "Mei", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"],
today: "Vandaag",
suffix: [],
meridiem: []
};
}(jQuery));
2.set this line in the ready function of your js file.
$(document).ready(function () {
$.fn.datetimepicker.defaults.language = 'nl';
}
3.initialize your datetimepicker in this way
$(this).datetimepicker({
format: "yyyy-mm-dd hh:ii",
autoclose: true,
weekStart: 1,
locale: 'nl',
language: 'nl'
});
following this steps i was able to convert my english datepicker and datetimepicker to dutch successfully.

all you are right! other way to getting !
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.ru.min.js
You can find out all languages on there https://cdnjs.com/libraries/bootstrap-datepicker
https://labs.maarch.org/maarch/maarchRM/commit/3299d1e7ed25018b48715e16a42d52c288b4da3e

For those who like me could not solve this problem with the solutions above, I sugest verifying if you initialize the $(element).datetimepicker(...) in different locations at the same time.
In my case, after a long time, I found a global.js interfering with another datetimepicker initialization.
If you need for some reason maintain work with different initializations, in different files, remember to remove the datetimepicker before each one with:
$(element).datetimepicker('remove')
Reference: https://www.malot.fr/bootstrap-datetimepicker/index.php#methods
Edit: This solution still needs to import the language files correctly, right after the bootstrap-datetimepicker.js.
I hope this helps!

for french speaker, this how you do it
;(function($){
$.fn.datepicker.dates['fr'] = {
days: ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"],
daysShort: ["dim.", "lun.", "mar.", "mer.", "jeu.", "ven.", "sam."],
daysMin: ["d", "l", "ma", "me", "j", "v", "s"],
months: ["janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre"],
monthsShort: ["janv.", "févr.", "mars", "avril", "mai", "juin", "juil.", "août", "sept.", "oct.", "nov.", "déc."],
today: "Aujourd'hui",
monthsTitle: "Mois",
clear: "Effacer",
weekStart: 1,
format: "dd/mm/yyyy"
};
}(jQuery));
$('.js-datepicker').datepicker({
format: 'dd/mm/yyyy',
startDate: new Date(),
language: 'fr',
});
thx to this source from : https://www.1formatik.com/1056/comment-mettre-bootstrap-datepicker-en-francais

This is for your reference only:
https://github.com/rajit/bootstrap3-datepicker/tree/master/locales/zh-CN
https://github.com/smalot/bootstrap-datetimepicker
https://bootstrap-datepicker.readthedocs.io/en/v1.4.1/i18n.html
The case is as follows：
<div class="input" id="event_period">
<input class="date" required="required" type="text">
</div>
$.fn.datepicker.dates['zh-CN'] = {
days:["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
daysShort:["周日","周一","周二","周三","周四","周五","周六"],
daysMin:["日","一","二","三","四","五","六"],
months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
monthsShort:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
today:"今日",
clear:"清除"
};
$('#event_period').datepicker({
inputs: $('input.date'),
todayBtn: "linked",
clearBtn: true,
format: "yyyy年mm月",
titleFormat: "yyyy年mm月",
language: 'zh-CN',
weekStart:1 // Available or not
});

Try this:
$( ".form_datetime" ).datepicker( $.datepicker.regional[ "zh-CN" ], { dateFormat: 'dd.mm.yyyy hh:ii' });