We Keep Coding

How to add moment.locale() [duplicate]

This question already has answers here:
Locale detection with Moment.js
(3 answers)
Closed 2 years ago.
I have my moment date in English. I'm trying to add moment.locale to have my date in french but it doesn't work. should have created a variable to do that? Or just add moment.locale() somewhere ?
<View style={{flex: 1}}>
<Text style={{color: 'white', textAlign: 'center', marginTop:20}}>
{moment(element.dateMatch).format('LLLL')}
</Text>
</View>
with this code i have the date in english .

This is what I have at the top of the file where I initialize my locales
import moment from 'moment';
import 'moment/locale/fr';
import 'moment/locale/nl';
Each supported language should be explicitly included, as react-native bundles are completely built upfront.
A little bit further the locale can be activated by setting it to fr (or any other imported locale):
moment.locale('fr');

You need to do the following, import your locale on app initialisation or wherever you need it.
there is two methods one for older version and one for newer
// From 2.8.1 onward
moment.locale(String);
moment.locale(String[]);
moment.locale(String, Object);
// Deprecated in 2.8.1
moment.lang(String);
moment.lang(String[]);
moment.lang(String, Object);
then you need to import locales, related to your language. I will add an example for french language
moment.locale('fr', {
months : 'janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre'.split('_'),
monthsShort : 'janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.'.split('_'),
monthsParseExact : true,
weekdays : 'dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi'.split('_'),
weekdaysShort : 'dim._lun._mar._mer._jeu._ven._sam.'.split('_'),
weekdaysMin : 'Di_Lu_Ma_Me_Je_Ve_Sa'.split('_'),
weekdaysParseExact : true,
longDateFormat : {
LT : 'HH:mm',
LTS : 'HH:mm:ss',
L : 'DD/MM/YYYY',
LL : 'D MMMM YYYY',
LLL : 'D MMMM YYYY HH:mm',
LLLL : 'dddd D MMMM YYYY HH:mm'
},
calendar : {
sameDay : '[Aujourd’hui à] LT',
nextDay : '[Demain à] LT',
nextWeek : 'dddd [à] LT',
lastDay : '[Hier à] LT',
lastWeek : 'dddd [dernier à] LT',
sameElse : 'L'
},
relativeTime : {
future : 'dans %s',
past : 'il y a %s',
s : 'quelques secondes',
m : 'une minute',
mm : '%d minutes',
h : 'une heure',
hh : '%d heures',
d : 'un jour',
dd : '%d jours',
M : 'un mois',
MM : '%d mois',
y : 'un an',
yy : '%d ans'
},
dayOfMonthOrdinalParse : /\d{1,2}(er|e)/,
ordinal : function (number) {
return number + (number === 1 ? 'er' : 'e');
},
meridiemParse : /PD|MD/,
isPM : function (input) {
return input.charAt(0) === 'M';
},
// In case the meridiem units are not separated around 12, then implement
// this function (look at locale/id.js for an example).
// meridiemHour : function (hour, meridiem) {
// return /* 0-23 hour, given meridiem token and hour 1-12 */ ;
// },
meridiem : function (hours, minutes, isLower) {
return hours < 12 ? 'PD' : 'MD';
},
week : {
dow : 1, // Monday is the first day of the week.
doy : 4 // Used to determine first week of the year.
}
});
And then you can just use any function you want. Also you can switch between default en and just defined fr locale.
moment.locale('fr');
moment(1316116057189).fromNow(); // il y a une heure
moment.locale('en');
moment(1316116057189).fromNow(); // an hour ago
original docs

You don't necessary need to use moment for this.
You can use the toLocaleDateString from the Date function in js.
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
console.log(element.dateMatch.toLocaleDateString('fr-FR', options));
// example output: jeudi 20 décembre 2012

datepicker first date in array initial

The purpose of this code is to include only the dates within the array and to activate the first date as initial in the datepicker.
I was able to get the first key of the array, which in the case is the first date I need to be as initial.
I believe the problem is in the format of the date, since it is deconfiguring the datepicker.
Follow my code:
JAVASCRIPT
// datepicker
var availableDates = {
"19102017": [
"09:00",
"09:15",
"09:45",
"11:45",
"14:00"
],
"20102017": [
"09:30"
],
"21102017": [
"14:00"
],
"22102017": [
"11:45"
],
"23102017": [
"09:00"
],
"24102017": [
"09:15"
],
"25102017": [
"09:30"
],
"26102017": [
"09:45"
],
"27102017": [
"10:00"
],
"28102017": [
"10:15"
]
};
getMinDate(Object.keys(availableDates)[0]);
function returnavailableDates(){
return availableDates;
}
function getMinDate(date) {
console.log(date);
return date;
}
function checkDateis(d) {
var check = false;
$.each(availableDates, function( key, value ) {
if (d === key) {
check = true;
}
});
if(check) return true;
}
function available(date) {
var dmy = $.datepicker.formatDate('dmyy', date);
var check = checkDateis(dmy);
if (check) {
return [true, "", "Available"];
}
else {
return [false, "", "unAvailable"];
}
}
$("#datepicker").datepicker({
showOtherMonths : true,
selectOtherMonths : true,
minDate : 0,
nextText : '',
prevText : '',
dateFormat : 'dd-mm-yy',
beforeShowDay : available
})
.datepicker('setDate', getMinDate(Object.keys(availableDates)[0]))
fiddle for tests: https://jsfiddle.net/n2n4udkf/

Yes the problem is format of the date being passed to setDate.
You can fix the issue by formatting the date before passing it to setDate
function formatDate(date) {
return date.slice(0,2) + '-' + date.slice(2,4) + '-' + date.slice(4);
}
$("#datepicker").datepicker({
showOtherMonths : true,
selectOtherMonths : true,
minDate : 0,
nextText : '',
prevText : '',
dateFormat : 'dd-mm-yy',
beforeShowDay : available
})
.datepicker('setDate', formatDate(getMinDate(Object.keys(availableDates)[0])))

You should just change dateFormat in datepicker's init options:
$("#datepicker").datepicker({
...
dateFormat : 'ddmmyy',
...
})
Documentation: formatDate().
Added: Also, there is an error in available() function:
var dmy = $.datepicker.formatDate('dmyy', date);
It should be:
var dmy = $.datepicker.formatDate('ddmmyy', date);
It works now, because all of your date have two digits in both day and month components, but it will fail with dates like 01122017, for example: this function will produce 1122017 key and checkDateis(dmy) call will always return false.

Add events into fullcalendar using JSON

i have a JSON string here:
[{"title":"Event","start":"2017-04-23T18:00:00","end":"2017-04-23T18:00:00"},{"title":"Event 2","start":"2017-04-23T11:15:00","end":"2017-04-23T11:15:00"},{"title":"Event 3","start":"2017-04-26T08:32:00","end":"2017-04-26T08:32:00"}]
how can I add those events in my calendar? (maybe using a loop?)

TRY THIS
$('#calendar').fullCalendar({
events: [
{
title : 'event1',
start : '2010-01-01'
},
{
title : 'event2',
start : '2010-01-05',
end : '2010-01-07'
},
{
title : 'event3',
start : '2010-01-09T12:30:00',
allDay : false // will make the time show
}
]
});

FullCalendar Re-Render Events

I'm using Fullcalendar integrated with jQuery Mobile. When I tried to add new events dynamically using following method during pageshow event it causes a JavaScript exeption as below
Uncaught TypeError: Cannot call method 'empty' of undefined
My JavaScript Code
$('#myCalendar').live('pageshow',function(event){
Newevents = [
{
title : 'event1',
start : '2012-11-24 01:00',
color:'red'
},
{
title : 'event2',
start : '2012-11-25',
end : '2012-11-27'
},
{
title : 'event3',
start : '2012-11-28 12:30:00',
allDay : false // will make the time show
},
{
title : 'event4',
start : '2012-11-29 01:30:00',
allDay : false // will make the time show
}
];
$('#calendar').fullCalendar('renderEvent',Newevents);
$('#calendar').fullCalendar('rerenderEvents');
});
$('#myCalendar').live('pagecreate',function(event){
$('#calendar').fullCalendar({
// put your options and callbacks here
header: {
left: '',
center: '',
right: ''
},
firstDay :1,
viewDisplay: function(view) {
$('#calendarLabel').html(view.title);
},
events:[
{
title : 'event1',
start : '2012-11-21 01:00',
end:'2012-11-24 02:00',
color:'red'
},
{
title : 'event2',
start : '2012-11-05',
end : '2012-11-07'
},
{
title : 'event3',
start : '2012-11-09 12:30:00',
allDay : false // will make the time show
},
{
title : 'event4',
start : '2012-11-09 01:30:00',
allDay : false // will make the time show
}
],
eventClick: function(calEvent, jsEvent, view) {
alert('Event: ' + calEvent.title);
},
dayClick: myDayClick,
height: 999999999
});
});

Rather than
.fullcalendar( 'renderEvent', []);
and
.fullCalendar( 'rerenderEvents');
Have you tried ... ?
.fullCalendar( 'addEventSource', NewEvents );

fullcalendar.js: times not showing up in agenda view

Like others I'm having problems getting timed events to show up on the agendaWeek view. If you look at the events below, the first two are mine and show up as all day events. The last one is from the documentation and shows up in the correct time block. I've been staring at this so long I'm sure I'm missing something simple. Can anyone else see it?
$(document).ready(function() {
$("#calendar").fullCalendar({
defaultView: 'agendaWeek',
month:0,//current year assumed, first day of month assumed
date: 4,
height: 650,
header: {left: 'title',center:'agendaWeek'},
events: [
{
title : 'Fred',
start : '2010-01-04 08:00:00',
end : '2010-01-04 09:00:00',
allday : false
},
{
title : 'Betty',
start : '2010-01-06 08:00:00',
allday : false
},
{
title : 'event3',
start : '2010-01-05 12:30:00',
allDay : false // will make the time show
}
]
});
});
</script>

I fixed my problem as follows: Where you have allday you need allDay with a capital D.
Cheers!