I am trying to use the Easepick (https://easepick.com/) datepicker to create a holiday booking system.
As the working week is Monday to Friday i need to block out Saturdays and Sundays which i have managed to do.
The next issue i am working with is i need people to be able to book over the course of more than 1 week but not go above there holiday allowance so for example if someone has 5 days remaining and wants to book between Wednesday and the following tuesday they should be able to.
var maxdays = 5
const picker = new easepick.create({
element: "#datepicker",
css: [
"https://cdn.jsdelivr.net/npm/#easepick/bundle#1.1.6/dist/index.css"
],
zIndex: 10,
AmpPlugin: {
dropdown: {
months: true,
years: true,
minYear: 2021
}
},
LockPlugin: {
maxDays: maxdays,
filter(date, picked) {
return [0, 6].includes(date.getDay());
}
},
plugins: [
"AmpPlugin",
"RangePlugin",
"LockPlugin"
],
})
This is what i have so far: https://jsfiddle.net/nzLcktv4/
what can i do?
Related
I get the date from the backend in this format 2022-10-20T10:41:31.095
How can I customize the date?
example
today: 22:15
yesterday: yesterday 13:45
Week: Friday 14:40
a month or more: 10/27/2007
const distance = formatDistance(new Date(), new Date(wroteTime), { locale: uk });
Hey my fellow Stackoverflowers, I am working with litepicker.js and ran into a snag that I am hoping one of you can help me figure out.
I have built out two separate litepickers and am successfully populating todays date on the first and tomorrows date in the second. (these are also successfully being accepted as the minDate for both)
What I have not been able to figure out is how to set the minDate for the second litepicker to one day after the selected startDate of the first litepicker.
You can see where I am at in this codepen
https://codepen.io/DigitalDesigner/pen/oNGRWzV
HTML Code:
<form>
<input id="start-date" class="form-control start-date"> /
<input id="end-date" class="form-control end-date">
</form>
Javascript:
<script>
let current = new Date();
let tomorrow = new Date(current.getTime() + 86400000); // + 1 day in ms
tomorrow.toLocaleDateString();
// Add litepicker calendar to stay dates
const startpicker = new Litepicker({
element: document.getElementById('start-date'),
singleMode: true,
allowRepick: true,
autoRefresh: true,
format: 'D MMMM YYYY',
startDate: current,
minDate: new Date(),
numberOfMonths: 1,
numberOfColumns: 1,
tooltipText: {
one: 'night',
other: 'nights'
},
tooltipNumber: (totalDays) => {
return totalDays - 1;
},
plugins: ['mobilefriendly']
});
const endpicker = new Litepicker({
element: document.getElementById('end-date'),
singleMode: true,
allowRepick: true,
autoRefresh: true,
format: 'D MMMM YYYY',
startDate: tomorrow,
minDate: current,
numberOfMonths: 1,
numberOfColumns: 1,
tooltipText: {
one: 'night',
other: 'nights'
},
tooltipNumber: (totalDays) => {
return totalDays - 1;
},
});
</script>
here is the litepicker site: https://litepicker.com/
How can I set the minDate for the second litepicker based on the first litepickers selected date?
Thanks in advance.
add this to the code
startpicker.on('selected', (date1, date2) => {
endpicker.setOptions({
minDate: startpicker.getDate(),
startDate: startpicker.getDate()
});
});
I am developing an application with ionic , in which I need the user to program the hours and days in which must reach a reminder.
I am using the plugin Cordova local notifications , as I can create a notification for example be repeated every Monday or the day that the user place ?
I’m around trying to do this but does not work
var date = new Date();
date.setDate(date.getDate());
date.setHours(15);
date.setMinutes(0);
date.setSeconds(0);
cordova.plugins.localNotifications.schedule({
id: 1,
title: 'Daily Training Reminder',
at: date,
every: 'Monday'
});
Can anyone help!!
this.localNotification.schedule({
"id": Math.floor((Math.random() * 1000)),
'title': 'Some Title',
'trigger': {
'every': {
'weekday': 1,
'hour': 10,
'minute': 40
},
'count': 1
}
});
Also i have used Ionic LocalNotificaiton
here hour is 24-hour based minute is minute count is count of notification
so it will receive a notification on Monday at 10:40
weekday:1 (Monday)
weekday:2 (Tuesday)...
The ionic wrapper is outdated and doesn't work so use the cordova plugin and then do something like
declare let cordova: any; //above export class
cordova.plugins.notification.local.schedule({
title: "title",
text: "body",
trigger: { at: new Date(),every: 'day', count: 1 }
});
I'm working with FullCalendar and I'm using it for a business which has varying hours
Mon, Tue, Wed, Fri is 09:00 - 17:00.
Thu is 09:00 - 19:00.
businessHours: {
start: '09:00', // a start time (10am in this example)
end: '17:00', // an end time (6pm in this example)
dow: [ 1, 2, 3, 5]
// days of week. an array of zero-based day of week integers (0=Sunday)
// (Monday-Thursday in this example)
}
http://fullcalendar.io/docs/display/businessHours/
How can this be achieved?
To use variable hours for business hours, you need to use background events like this:
events:
[
{
id: 'available_hours',
start: '2015-1-13T8:00:00',
end: '2015-1-13T19:00:00',
rendering: 'background'
},
{
id: 'available_hours',
start: '2015-1-14T8:00:00',
end: '2015-1-14T17:00:00',
rendering: 'background'
},
{
id: 'work',
start: '2015-1-13T10:00:00',
end: '2015-1-13T16:00:00',
constraint: 'available_hours'
}
]
Notice in the last event it has the constraint filled in? This says that this can only be placed within an available hours slot. Using constraints, you can make flexible business hours.
For more information, see this link,
http://fullcalendar.io/docs/event_ui/eventConstraint/
Try this - Adding an event for each business hour, like so:
{
...
events: [
// business hours 1
{
className: 'fc-nonbusiness',
start: '09:00',
end: '17:00',
dow: [1, 2, 3, 4], // monday - thursday
rendering: 'inverse-background'
},
// business hours 2
{
className: 'fc-nonbusiness',
start: '10:00',
end: '15:00',
dow: [6], // saturday
rendering: 'inverse-background'
}],
...
}
NOTE : className and rendering are important options for this to work.
Good Luck.
I have a HighStock chart (type column) that contains a value for each day. What I would like to do looks very simple, however I cannot manage to achieve it. I would like my data to appear day by day when we display one month and month by month when we display more than one month. I have 3 buttons for range selector :
buttons: [{
type: 'month',
count: 1,
text: 'Vue par mois'
}, {
type: 'year',
count: 1,
text: 'Annee'
}, {
type: 'all',
text: 'Tout'
}]
I tried to play with de datagrouping options but the problem is that the default value group my data by week instead of month. I tried many solutions but nothing works :
units:
[[
'month',
[1]
],
[
'day',
[1]
]
]
The solution above for example group the data by month, even if we display for one month, resulting in a big column block on the graph.
I feel like I'm missing something but what ? I hope my explanations are understandable. Any help would really be appreciated.
Thanks in advance !
Milene