I have this date range datepicker :
$(function () {
//date picker range
$(function () {
var dateFormat = "mm/dd/yy",
from = $("#<%= TextBox1.ClientID %>").datepicker({
//defaultDate: "+1w",
changeMonth: true,
minDate: MinDateManipulation(),
beforeShowDay: DisableMonday,
maxDate: '+2M',
numberOfMonths:1
})
.on("change", function () {
to.datepicker("option", "minDate", getDate(this));
}),
to = $("#<%= TextBox2.ClientID %>").datepicker({
//defaultDate: "+1w",
changeMonth: true,
beforeShowDay: DisableMonday,
maxDate: '+2M',
numberOfMonths:1
})
.on("change", function () {
from.datepicker("option", "maxDate", getDate(this));
});
function getDate(element) {
var date;
try {
date = $.datepicker.parseDate(dateFormat, element.value);
} catch (error) {
date = null;
}
return date;
}
});
It work when i tried to disable date from 2 months after current date, but the purpose is, to disable date in January 1st every next year after current year.
for example : current date [11/3/2018]
I want to disable date to chose after last day of December every current year, with maxDate [31/12/2018].
But how do we set dynamically for the value of the maxDate? without update the value of the year manually with my daterange condition script?
It's not clear the range you are trying to capture, yet you can do a lot with what you already have.
One way would be to set it to a string format:
var yr = $.datepicker.formatDate("yy", new Date());
var dec31 = "12/31/" + yr;
....({
maxDate: dec31,
})
this will get the current Year (2018) and create a string that can be used as the max date: 12/31/2018. This will remain dynamic and update each year.
You could also define a number of days in the year as holidays. Lots of things you can do.
Maybe this example will help clear up a few things.
$(function() {
var holidays = {
2018: {
11: {
12: [
false,
"holiday",
"Veterans Day Observed"
],
22: [
false,
"holiday",
"Thanksgiving Day"
]
},
12: {
25: [
false,
"holiday",
"Christmas Day"
],
31: [
false,
"holiday",
"New Year's Eve"
]
}
},
2019: {
1: {
1: [
false,
"holiday",
"New Year's Day"
],
21: [
false,
"holiday",
"Martin Luther King Jr. Day"
]
},
2: {
18: [
false,
"holiday",
"Presidents' Day"
]
},
5: {
27: [
false,
"holiday",
"Memorial Day"
]
},
7: {
4: [
false,
"holiday",
"Independence Day"
]
},
9: {
2: [
false,
"holiday",
"Labor Day"
]
},
10: {
14: [
false,
"holiday",
"Columbus Day"
]
},
11: {
11: [
false,
"holiday",
"Veterans Day"
],
28: [
false,
"holiday",
"Thanksgiving Day"
]
},
12: {
25: [
false,
"holiday",
"Christmas Day"
],
31: [
false,
"holiday",
"New Year's Eve"
]
}
}
};
function disableDays(d) {
var result = [true, ""];
var yr = $.datepicker.formatDate("yy", d),
mo = $.datepicker.formatDate("m", d),
dy = $.datepicker.formatDate("d", d);
if ($.datepicker.formatDate("D", d) == "Mon") {
result[0] = false;
}
if (holidays[yr] !== undefined) {
if (holidays[yr][mo] !== undefined) {
if (holidays[yr][mo][dy] !== undefined) {
console.log("Holiday:", yr, mo, dy);
result = holidays[yr][mo][dy];
}
}
}
return result;
}
var dateFormat = "mm/dd/yy",
from = $("#client-id-1").datepicker({
//defaultDate: "+1w",
changeMonth: true,
minDate: 0,
beforeShowDay: disableDays,
maxDate: '+1y',
numberOfMonths: 1
})
.on("change", function() {
to.datepicker("option", "minDate", getDate(this));
}),
to = $("#client-id-2").datepicker({
//defaultDate: "+1w",
changeMonth: true,
beforeShowDay: disableDays,
maxDate: '+2m',
numberOfMonths: 1
})
.on("change", function() {
from.datepicker("option", "maxDate", getDate(this));
});
function getDate(element) {
var date;
try {
date = $.datepicker.parseDate(dateFormat, element.value);
} catch (error) {
date = null;
}
return date;
}
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Client 1: <input type="text" id="client-id-1"></p>
<p>Client 2: <input type="text" id="client-id-2"></p>
You can use moment.js and use my code to get max date:
function _getMaxDate() {
const today = moment().startOf('day')
const lastDayOfYear = moment().endOf('year').startOf('day')
return lastDayOfYear.diff(today, 'days')
}
Related
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'm using a my-date-range-picker to display a calendar to the user choose a date and display her in a span like a string.
Step by step:
I click in the label to open the calendar;
The calendar opens with current date selected;
I choose a date, for example, 8th October, 2018;
The calendar closes;
The date that i previous choose appears correctly in span;
Open the calendar again;
Here, the calendar shows the current month(September). I want that calendar show the date that i previous select - 8th October, 2018;
My HTML code for date picker:
<my-date-range-picker *ngIf="this.opened && view=='date'" class="date_picker" [options]="date_picker" [(ngModel)]="this.model" (dateSelected)="onDateRangeChanged($event)"></my-date-range-picker>
The label responsable to show the selected date:
<div class="lineheight" [ngClass]="{'dates': type_resume_view == 'none'}">
<span>{{dates.first.format('DD/MM/YYYY')}}</span>
</div>
In my TS file, the event of date change goes to:
onDateRangeChanged(ev) {
if (this.view == "range") {
this.dates.first = moment({
day: ev.beginDate.day,
month: ev.beginDate.month - 1,
year: ev.beginDate.year
});
this.dates.last = moment({
day: ev.endDate.day,
month: ev.endDate.month - 1,
year: ev.endDate.year
});
this.setDate();
if (!this.always_open) {
this.onSelectDate.emit(this.dates);
this.opened = false;
}
}
if (this.view == "date") {
this.dates.first = moment({
day: ev.date.day,
month: ev.date.month - 1,
year: ev.date.year
});
this.dates.last = moment({
day: ev.date.day,
month: ev.date.month - 1,
year: ev.date.year
});
if (!this.always_open) {
this.onSelectDate.emit(this.dates);
this.opened = false;
}
if (this.interval != undefined) {
switch (this.interval) {
case "week":
this.dates.first = this.dates.first.startOf("week").add(1, 'day');
this.dates.last = this.dates.last.endOf("week").add(1, 'day');
break;
case "month":
this.dates.first = this.dates.first.startOf("month");
this.dates.last = this.dates.last.endOf("month");
break;
}
}
this.setDate();
if (this.always_open) {
this.opened = false;
setTimeout(() => {
this.opened = true
}, 0);
}
}
}
And then to method setDate():
this.model.beginDate.year = this.dates.first.format("YYYY");
this.model.beginDate.month = this.dates.first.format("MM");
this.model.beginDate.day = this.dates.first.format("DD");
this.model.endDate.year = this.dates.last.format("YYYY");
this.model.endDate.month = this.dates.last.format("MM");
this.model.endDate.day = this.dates.last.format("DD");
My declared variables are:
date_picker: IMyDrpOptions = {
showClearBtn: false,
showApplyBtn: false,
showSelectDateText: false,
componentDisabled: false,
markCurrentDay: true,
showWeekNumbers: true,
inline: true,
dateFormat: 'yyyy-mm-dd',
firstDayOfWeek: 'mo',
disableUntil: {
year: 1990,
month: 1,
day: 1
}
};
private model: any = {
beginDate: {
year: 2018,
month: 10,
day: 9
},
endDate: {
year: 2018,
month: 10,
day: 19
}
};
Auxiliar Methods:
open_calendar() {
this.model = this.model;
if (!this.always_open) {
this.opened = !this.opened;
if (this.opened) {
this.onCalendarOpen.emit(this.dates);
} else {
this.onClose.emit();
}
}
}
close_calendar() {
this.opened = false;
this.onClose.emit();
}
I just want that calendar open in the previous selected month, because the date is correctly selected.
UPDATE:
The example that i describe, the date is correct but not show the month correctly
my-date-range-picker has the defaultMonth attribute, that's what you will use to set which month the calendar should open such as:
import { IMyDefaultMonth } from 'mydatepicker';
private defaultMonth: IMyDefaultMonth = { defMonth: '12/2019' };
In HTML:
<my-date-range-picker name="mydate" [options]="myDatePickerOptions" [defaultMonth]="defaultMonth" />
in the example the default month will open at December 2019 as defined by defaultMonth.
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.
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.
I am using a datepicker to retrieve an object from my Firebase DB, it works but no matter which date I select, today's object is returned.
I am using orderByChild and timestamp to sort, but it is not working.
var ref = firebase.database().ref(uid);
ref.orderByChild('timestamp').startAt(strDateTime).endAt(strDateTime + "86400").on('value', function (snapshot) {
snapshot.forEach(function (childSnapshot) {
// childData will be the actual contents of the child
var childData = childSnapshot.val();
arms = childData.arms;
console.log(arms);
document.getElementById("demo").innerHTML = arms;
});
});
My database structure is:
{
"ZwYo0nB92oODcjjxJ0Eqeo4l3Ny1" : {
"BodyStats-KaFX2MvLHt0U6lLc365" : {
"arms" : "48",
"bodyfat" : "",
"calves" : "",
"chest" : "",
"forearms" : "",
"hips" : "",
"neck" : "",
"shoulders" : "",
"thighs" : "",
"timestamp" : 1484188562973,
"waist" : "",
"weight" : ""
}
}
}
The strDateTime:
// Date Picker Function
var strDateTime;
var timeInt;
$(function () {
$('#datepicker').datepicker({
inline: false, // Expanded cal
//nextText: '→',
//prevText: '←',
showOtherMonths: true,
//dateFormat: 'dd MM yy',
dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
showOn: "button",
buttonImage: "img/calendar-icon.png",
buttonImageOnly: true,
onSelect: function () { // When cal is opened execute
var currentDate = new Date($("#datepicker").datepicker("getDate"));
var strDateTime = currentDate.getDate() + "/" + (currentDate.getMonth() + 1) + "/" + currentDate.getFullYear();
alert(strDateTime);
startDatabaseQueries(strDateTime);
var timeInt = parseInt(strDateTime); // Parse strDateTime for startDatabaseQueries function
}
});
$('#datepicker').datepicker('setDate', new Date());
var currentDate = new Date($("#datepicker").datepicker("getDate"));
var strDateTime = currentDate.getDate() + "/" + (currentDate.getMonth() + 1) + "/" + currentDate.getFullYear();
});