How to set global values for daterangepicker? - javascript

Github: Bootstrap Daterangepicker, plugin source: daterangepicker.js
I want to set global values for the locale option. I don't want to set it for each element every time I use it.
Here is an example code how to setup daterangepicker for a specific element.
$('#demo').daterangepicker({
"locale": {
"format": "MM/DD/YYYY",
"separator": " - ",
"applyLabel": "Apply",
"cancelLabel": "Cancel",
"fromLabel": "From",
"toLabel": "To",
"customRangeLabel": "Custom",
"weekLabel": "W",
"daysOfWeek": [
"Su",
"Mo",
"Tu",
"We",
"Th",
"Fr",
"Sa"
],
"monthNames": [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
"firstDay": 1
},
"startDate": "12/01/2016",
"endDate": "12/07/2016"
}, function(start, end, label) {
console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
});
Is it even possible? Or do I have to rewrite the plugin?
What's the best approach if this is not possible without some custom modification?

you can store the dateRangePickerSettings as a global variable
var dateRangePickerSettings = {
locale: {...},
};
and reference it to all ur plugin instances
$('#demo1').daterangepicker({
"locale": dateRangePickerSettings.locale,
"startDate": "06/01/2016",
"endDate": "06/07/2016"
});
$('#demo2').daterangepicker({
"locale": dateRangePickerSettings.locale,
"startDate": "12/01/2016",
"endDate": "12/07/2016"
});

Dan Grossman added support in 2.1.26
Added support for $.fn.daterangepicker.defaultOptions to set default options for all pickers on page.
Lets try to explain it here for newcomers.
$.fn.daterangepicker.defaultOptions = {
locale: {
"format": "DD/MM/YYYY",
"separator": " - ",
"applyLabel": "Aplicar",
"cancelLabel": "Cancelar",
"fromLabel": "Desde",
"toLabel": "Hasta",
"customRangeLabel": "Personalizado",
"weekLabel": "W",
"firstDay": 0,
"daysOfWeek": ["Lu","Ma","Mi","Ju","Vi","Sa","Do"],
"monthNames": [
"Enero",
"Febrero",
"Marzo",
"Abril",
"Mayo",
"Junio",
"Julio",
"Agosto",
"Septiembre",
"Octubre",
"Noviembre",
"Diciembre",
]
}
}
$('#period').daterangepicker();
Thanks to #kurdemol94

Related

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 generate a .js.map file against a JavaScript file

I modified a culture setting file from Kendo (kendo.culture.en-US-Custom.min.js) and was able to minify it. But I don't know how to go about creating a .map against it. My network log shows a 404 against that file. Is there a generator for map file? Here is the file:
!function (e) { "function" == typeof define && define.amd ? define(["kendo.core.min"], e) : e() }(function () {
!function (e, y) {
kendo.cultures["en-US"] = {
name: "en-US", numberFormat: {
pattern: ["-n"],
decimals: 2,
",": ",",
".": ".",
groupSize: [3],
percent: {
pattern: ["-n %", "n %"],
decimals: 2,
",": ",",
".": ".",
groupSize: [3],
symbol: "%"
},
currency: {
name: "UAE Dirham",
abbr: "AED",
pattern: ["-n $", "n $"],
decimals: 2,
",": ",",
".": ".",
groupSize: [3],
symbol: "د.إ."
}
},
calendars: {
standard: {
days: {
names: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
namesAbbr: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
namesShort: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
},
months: {
names: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
namesAbbr: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
},
AM: ["AM", "am", "AM"],
PM: ["PM", "pm", "PM"],
patterns: {
d: "dd-MMM-yyyy",
D: "dddd, MMMM dd, yyyy",
F: "dddd, MMMM dd, yyyy h:mm:ss tt",
g: "dd-MMM-yyyy h:mm tt",
G: "dd-MMM-yyyy h:mm:ss tt",
m: "MMMM d",
M: "MMMM d",
s: "yyyy'-'MM'-'dd'T'HH':'mm':'ss",
t: "h:mm tt",
T: "h:mm:ss tt",
u: "yyyy'-'MM'-'dd HH':'mm':'ss'Z'",
y: "MMMM, yyyy", Y: "MMMM, yyyy"
},
"/": "/",
":": ":",
firstDay: 0
}
}
}
}(this)
});
Thanks.
For creating the minimized version of your javascript source code you can follow one of this options.
Command line uglifi-js:
For installing:
npm install uglify-js -g
Running the command create the minimized file and the map:
uglifyjs kendo.culture.en-US-Custom.js
--source-map kendo.culture.en-US-Custom.min.js.map
-o kendo.culture.en-US-Custom.min.js
Follow the instruction of this link
Grunt Uglify:
You can use Grunt.js uglify:
To install:
npm install grunt-contrib-uglify --save-dev
The code in Gruntfile.js:
grunt.initConfig({
uglify: {
my_target: {
options: {
sourceMap: true // this line is for create the map
},
files: {
'kendo.culture.en-US-Custom.min.js': ['kendo.culture.en-US-Custom.js']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
Running the "uglify task" will create a minimized version of the file and the map.
Follow the instruction of this link
Gulp Uglify:
Alternatively you can do something similar with "Gulp Uglify".
Follow the instruction of this link

Replace the decimal dot with a comma on an axis in D3?

This is about the ticks on axes in D3: Is there a way to replace the decimal dot with a comma in numbers? I want the numbers to be displayed like this (which is normal in Germany, such a big number is just for demonstration)
1.000.000,1 // This is one million and a tenth
and not like this:
1,000,000.1
I've read the documentation about the topic, but it seems like there is no possibility!? That's my relevant code so far:
localeFormatter = d3.locale({
"decimal": ".",
"thousands": ",",
"grouping": [3],
"currency": ["", "€"],
"dateTime": "%a, %e %b %Y, %X",
"date": "%d.%m.%Y",
"time": "%H:%M:%S",
"periods": ["", ""],
"days": ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
"shortDays": ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
"months": ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
"shortMonths": ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"]
});
numberFormat = localeFormatter.numberFormat("04.,"); // The setting is applied, but has not the desired effect...
yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(numberFormat);
Using the following settings for d3.locale:
var localeFormatter = d3.locale({
"decimal": ",",
"thousands": ".",
...
});
Note that I have changed the . in , and vice versa. And with:
var numberFormat = localeFormatter.numberFormat(",.2f");
I print the number using a thousands separator , (it uses a . as defined in the locale) and two digits after the comma .2f:
console.log(numberFormat(1000000.1)); // "1.000.000,10"

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"
};

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' });

Categories

Resources