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()
});
});
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 });
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?
I'm trying to implement a resort booking where I can check if a specific date is still available or not by using bootstrap daterangepicker but I can't figure out how to do this. I got this thread but it is not using daterangepicker.
Note: I'm also using laravel5.1 so maybe this can help the problem.
Database fields
id
name
Place
start_time
end_time
My JS Code Setup with daterangepicker
$(function () {
$('.time').daterangepicker({
"minDate": moment('{{ date('Y-m-d G') }}'),
"timePicker": true,
"showDropdowns": true,
"timePicker24Hour": false,
"timePickerIncrement": 5,
"autoApply": true,
"locale": {
"format": "MM/DD/YYYY hh:mm:ss A",
"separator": " — ",
}
});
});
You want to ideally, use the isInvalidDate configuration option when creating a new instance of the daterangepicker.
isInvalidDate
var disabledDates = {{ $disabledDates->toJson(); }};
$(function () {
$('.time').daterangepicker({
"minDate": moment('{{ date('Y-m-d G') }}'),
"timePicker": true,
"showDropdowns": true,
"timePicker24Hour": false,
"timePickerIncrement": 5,
"autoApply": true,
"locale": {
"format": "MM/DD/YYYY hh:mm:ss A",
"separator": " — ",
},
"isInvalidDate": function (date) {
return disabledDates.indexOf(date) != -1;
}
});
});
The $disabledDates php variable in this instance, is assumed to be a collection of disabled dates, all as their string formats.
Assume you have a start_date and a end_date.
$(function() {
var start_date = '2018-3-1';
var end_date = '2018-3-10';
$('input[name="daterange"]').daterangepicker({
"minDate": moment('2018-1-1'),
"timePicker": true,
"showDropdowns": true,
"timePicker24Hour": false,
"timePickerIncrement": 5,
"autoApply": true,
"locale": {
"format": "MM/DD/YYYY hh:mm:ss A",
"separator": " — ",
},
"isInvalidDate": function (date) {
var is_valid = true;
#foreach($dates as $date)
if(moment(date).isBetween($date->start_date, $date->end_date, 'day', '[]')){
is_valid = false;
}
#endforeach
return is_valid;
}
});
});
Then you can't select the day between start_date and end_date.
I want fullCalendar to go to one a specifical day, but when I call
$('#calendarContainer').fullCalendar('gotoDate', date);
It only increment the view of the actual date by one.
My variable date is
var date =$.fullCalendar.moment(moment.utc(app.mCurrentStartDate).format('YYYY-MM-DD'));
My only way to make it work was to do
for (var i = 0; i < 100; i++)
{
$('#calendarContainer').fullCalendar('gotoDate', date);
}
But that is not possible.
My calendar use custom views
views: {
agendaThreeDay: {
type: 'agenda',
duration: { days: 3 },
buttonText: '3 day',
columnFormat: 'dddd D MMMM',
},
agendaTwoDay: {
type: 'agenda',
duration: { days: 2 },
buttonText: '2 day',
columnFormat: 'dddd D MMMM',
}
},
Do you know if this is the intented behaviour of gotoDate, or may be I use it the wrong way ?
Thanks.
Start Date & Format not setting in date range picker, please find the code below
Issue: Start date and format not bind properly in the view
In Controller
$scope.pngDatePicker = { startDate: moment().subtract(1, "days"), endDate: moment() };
$scope.pngDatePickerOpts = {
autoApply: true,
locale: { format: 'YYYY-MM-DD' },
dateLimit: {
months: 3
},
maxDate: moment()
};
In view
<input type="daterange" data-ng-required="true" date-range-picker ng-model="pngDatePicker" options="pngDatePickerOpts" id="dateRange" class="form-control date-picker">
Output:
Date range Picker Output in angularjs view