Does someone know, how to configure a el-date-picker in element-plus to set the first day of week.
The docs say it configurable via day.js but not to use configure day.js in element.
I have done this so far.
import de from 'element-plus/es/locale/lang/de';
const i18n = createI18n({
legacy: false,
locale: 'de',
messages: {
'de': messagesDe
},
datetimeFormats: {
'de': {
short: {
year: 'numeric',
month: '2-digit',
day: '2-digit'
},
long: {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
}
}
},
});
app.use(ElementPlus, {
locale: de,
});
app.use(i18n);
Thank you for your help.
The workaround described in dayjs#215 also works for Element Plus.
For example, to set Monday as the first day of the week for the de locale, create a de object off of dayjs.Ls, and set weekStart=1:
// main.js
import dayjs from 'dayjs'
dayjs.Ls.de ??= {}
dayjs.Ls.de.weekStart = 1
demo
Related
I'm using vue-i18n (version 8.24.2) in my app, and everything works as expected except when rendering dates using locale = nb-NO (Norwegian). Expected format: dd.MM.yyyy. Actual format: MM/dd/yyyy. When switching locale to German, which is using the same date format as Norwegian, correct date format is applied.
This open issue would probably solve my issue:
https://github.com/kazupon/vue-i18n/issues/625
I've spent a couple of hours investigating this issue, but I'm currently stuck, hence any help will be highly appreciated.
My i18n.ts (I left out config for languages not related to this issue)
import Vue from "vue";
import VueI18n from "vue-i18n";
enum Locales {
NO = "nb-NO"
}
const LOCALES = [
{ value: Locales.NO, caption: "Norsk" }
];
import nb_NO from "./locales/nb-NO.json";
export const messages = {
[Locales.NO]: nb_NO
};
const defaultLocale = Locales.NO;
const dateTimeFormats = {
"nb-NO": {
short: {
year: "numeric",
month: "2-digit",
day: "2-digit",
},
long: {
year: "numeric",
month: "2-digit",
day: "2-digit",
hour: "2-digit",
minute: "2-digit",
hour12: false,
},
},
} as VueI18n.DateTimeFormats;
Vue.use(VueI18n);
// Create VueI18n instance with options
const i18n = new VueI18n({
locale: navigator.language.split('-')[0] || process.env.VUE_APP_I18N_LOCALE || defaultLocale,
fallbackLocale: defaultLocale,
messages,
dateTimeFormats: dateTimeFormats,
silentTranslationWarn: true,
});
const translate = (key: string): string => {
if (!key) {
return "";
}
return i18n.t(key) as string;
};
export { i18n, translate }; //export above method
vue-i18n simply forwards the date localization to Intl.DateTimeFormat(locale).format(date).
It seems the result is only incorrect in Chrome as of v92 (Issue 1233509). This bug is fixed in Chrome Canary v94.
As a workaround, you can modify the vue-i18n instance's _dateTimeFormatters to use the Danish (da) locale's formatter for nb-NO:
const i18n = new VueI18n({/*...*/});
i18n._dateTimeFormatters[Locales.NO + '__short'] =
new Intl.DateTimeFormat('da', dateTimeFormats[Locales.NO].short);
i18n._dateTimeFormatters[Locales.NO + '__long'] =
new Intl.DateTimeFormat('da', dateTimeFormats[Locales.NO].long);
demo
Currently iam trying to pass an array of events in my database as a simple parameter. Below i attach my backend callback, the query document and the pure javascript Full Calendar implementation. So i tried forEach but gives me error . If i pass directly the objects array anaylitically then all works fine, but my issue is that i cannot render events by providing the array variable as argument. I wont like use JSON feed feature because my api is not able to be configurated. Any suggestion welcomed, thank you in advance
calendar:35 Uncaught ReferenceError: eventsArray is not defined
at HTMLDocument.<anonymous>
Express Js Callback
exports.getcalendar=async function (req,res,next){
var bookdata={};
try{
bookdata=await booking.aggregate().match({resourceID:mongoose.Types.ObjectId(req.params.id)}).project({
'title':'$Project_title',
'start':'$date_started',
'end':'$date_finished',
'_id':0
})
}catch (error){
return next(error);
}
finally {
console.log(JSON.parse(JSON.stringify(bookdata)));
res.render('calendar',{databook:JSON.parse(JSON.stringify(bookdata))});
}
};
bookdata
[
{
title: 'prj',
start: '2021-04-08T20:25:00.000Z',
end: '2021-04-09T20:25:00.000Z'
},
{
title: 'Proej3',
start: '2021-04-12T00:58:00.000Z',
end: '2021-04-13T00:58:00.000Z'
},
{
title: 'May proj',
start: '2021-05-10T11:00:00.000Z',
end: '2021-05-11T11:00:00.000Z'
},
{
title: 'prj',
start: '2021-04-28T15:00:00.000Z',
end: '2021-04-28T18:00:00.000Z'
}
]
FullCalendar Constructor
script.
document.addEventListener('DOMContentLoaded', function (databook) {
var calendarEl = document.getElementById('calendar');
var initdate = new Date();
var calendar = new FullCalendar.Calendar(calendarEl, {
function(){
var eventsArray=[];
bookdata.forEach(function (element){
eventsArray.push({
title:element.title,
start:element.start,
end:element.end })
})
},
initialView: 'dayGridMonth',
timeZone:'Europe/Athens',
initialDate: initdate,
handleWindowResize:true,
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
eventTimeFormat:{
hour: 'numeric',
minute: '2-digit',
},
eventDisplay:'auto',
views:{
timeGrid:{
formatDateTime:'DD/MM/YYYY HH:mm'
}
},
events:eventsArray
});
calendar.addEvent()
calendar.render();
});
Don't create the eventsArray variable inside the calendar variable. You can initialize it right before the calendarEl is created for example
I'm having a hard time figuring out the latest version of expo on how to setup a local notification at a specific time in the day and make it to repeat every day.
relevant section from package.json
"expo": "~40.0.0",
"expo-notifications": "~0.8.2",
I can create notifications using this sipets
function startsTomorowButNotAbleToRepeateEvryDay() {
let tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
tomorrow.setHours(20);
tomorrow.setMinutes(0);
return {
content: {
title: "Time to study v2",
body: "Don't forget to study today!",
},
trigger: tomorrow,
};
}
function repeatsEvryDayButNotPossibleToSetTime() {
const seccondsInADay = 24 * 60 * 60;
return {
content: {
title: "Time to study v2",
body: "Don't forget to study today!",
},
trigger: {
seconds: seccondsInADay,
repeats: true,
},
};
}
and this is how in use on or the other
Notifications.scheduleNotificationAsync(startsTomorowButNotAbleToRepeateEvryDay());
Notifications.scheduleNotificationAsync(repeatsEvryDayButNotPossibleToSetTime());
How do I make a notification start tomorrow at a specific time and have it repeated every day?
From Notifications.types.d.ts
export interface DailyTriggerInput {
channelId?: string;
hour: number;
minute: number;
repeats: true;
}
You can use:
trigger: {
hour: 19;
minute: 45;
repeats: true;
}
try as follows:
const schedule = new Date();
schedule.setHours(19);
schedule.setMinutes(45);
Notifications.scheduleNotificationAsync({
content: {
title: "title txt",
body: 'body text',
},
trigger:{
schedule,
repeats: true,
});
I'm stuck on trying to make my expo app deliver push notifications every week. In docs I read that I'm supposed to use WeeklyTriggerInput interface as my trigger object but when I try to do it, I get "Failed to schedule the notification. Trigger of type: calendar is not supported on Android." error. I also can't import WeeklyTriggerInput interface from expo-notifications. Here is my code:
const notificationParams: Notifications.NotificationRequestInput = {
content: {
title: 'Just title',
body: 'Lorem ipsum',
},
trigger: {
hour: 13,
minute: 10,
repeats: true,
weekday: 1,
},
};
try {
const notificationId = await Notifications.scheduleNotificationAsync(
notificationParams
);
} catch (err) {
console.log(err);
}
By following docs examples, this snippet worked for me:
const id = await Notifications.scheduleNotificationAsync({
content: {
title: "Dia de planejar sua alimentação! 📅",
body: 'Utilize uma de nossas receitas, crie suas próprias, experimente novas combinações ou veja a sugestão de um nutricionista.',
},
trigger: {
repeats: true,
weekday: 1, //Sunday
hour: 8,
minute: 0
},
});
im newbie here. I want control the datepicker to be disabled automatically based on the existing api. I using the vuejs-datepicker library. I've seen the documentation and managed to implement it statically, but having problems when implementing it reactively.
This is my previous view:
<datepicker
:disabled-dates="state.disabledDates">
</datepicker>
And, my previous static value of datepicker, especially for the day:
data() {
var year = (new Date()).getFullYear()
var month = (new Date()).getMonth()
var dDate = (new Date()).getDate()
var state = {
disabledDates: {
to: new Date(year, month, dDate), // Disable all dates up to specific date
// from: new Date(2020, 0, 26), // Disable all dates after specific date
days: [0,1], // Disable Saturday's and Sunday's
}
}
return {
state: state,
day: '',
}
},
For now, here my view:
<datepicker
:disabled-dates="disabledDates">
</datepicker>
Console output:
My script:
<script>
data() {
return {
day: '',
year : (new Date()).getFullYear(),
month : (new Date()).getMonth(),
dDate : (new Date()).getDate(),
}
},
computed:{
// reactive
disabledDates: {
to: new Date(year, month, dDate), // Disable all dates up to specific date, 2020,8,8
days: [day], // Disable day, 0,1
}
},
watch: {
'day': function(day){
console.log('day: '+day)
return this.day
},
},
</script>
Thank you.
I'm pretty sure your only problem is that your syntax for computed properties is wrong. They should be functions, since they need to be run. Their dependencies are automatically determined by Vue, and when those change, the function is re-run. So, try this:
data: function() {
return {
day: '',
year: (new Date()).getFullYear(),
month: (new Date()).getMonth(),
dDate: (new Date()).getDate()
};
},
computed: {
// Here. This should be a function.
disabledDates: function() {
return {
// Make sure to use 'this.' when in a component
to: new Date(this.year, this.month, this.dDate),
days: [ this.day ]
};
}
},
watch: {
day: function(day) {
console.log(`Day: ${day}`);
return value;
}
}