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.
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 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')
}
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 trying to convert the default date time format returned from a RepositoryRestResource in Spring Boot to a human readable format in jQuery Datatables. I found this Datatables plugin:
DataTables datetime plugin
I'm using it but getting "Invalid date"
I believe I need to specify the input date format to the plugin so moment.js can understand it to do the conversion but I'm not sure how to format the input format.
Here is my javascript DataTable script:
$('#invoices').DataTable({
"bFilter": true,
"autoWidth": true,
"processing": false,
"ajax": _link,
"sAjaxDataProp" : "_embedded.invoices",
"oLanguage": {
"sSearch": "<span>Filter:</span> _INPUT_" //search
},
columnDefs: [ {
targets: 0,
render: $.fn.dataTable.render.moment( 'YYYY-MM-DD' )
} ],
"columns": [
{ "data": "dropoff"},
{ "data": "ready" },
{ "data": "total_quantity" },
{ "data": "total_price" },
{ "data": "paid" }
]
});
Here's example of the service object data: _embedded.invoices
_embedded: {
invoices: [
{
dropoff: "2016-02-13T18:00:00.000+0000",
ready: "2016-02-15T14:00:00.000+0000",
note: "ZIPPER IS NIKEL",
paid: true,
total_price: 79.8,
total_quantity: 203,
_links: {
self: {
href: "http://localhost:8080/invoices/1"
},
invoice: {
href: "http://localhost:8080/invoices/1"
},
itemlines: {
href: "http://localhost:8080/invoices/1/itemlines"
},
customer: {
href: "http://localhost:8080/invoices/1/customer"
}
}
}
So you can see the date format above: "2016-02-15T14:00:00.000+0000"
It has the full date, time, and utc offset. I just want it to show date and time without seconds, something simple doesn't need to be fancy, just clean it up a little remove the T and UTC garbage at the end for the end users.
Appreciate the help!!!
For my HTML scripts I have them in this order, which doesn't seem to be causing a problem but here it is just in case:
<script src="/js/jQuery-2.2.3/jquery-2.2.3.js"></script>
<script src="/js/datatables.js"></script>
<script src="/js/datetime.js"></script>
<script src="/js/moment.js"></script>
I would suggest you define bean for Jackson configuration:
#Bean
public Jackson2ObjectMapperBuilder jacksonBuilder() {
Jackson2ObjectMapperBuilder b = new Jackson2ObjectMapperBuilder();
b.indentOutput(true).dateFormat(new SimpleDateFormat("yyyy-MM-dd"));
return b;
}
For more info check how to Customizing the Jackson ObjectMapper: With Spring Boot.
I have used jquery-simple-datetimepicker
available here
https://github.com/mugifly/jquery-simple-datetimepicker
my code is
<input name="day_time" id="day_time_input" type="text" value="" />
jQuery(function () {
jQuery('#day_time_input').appendDtpicker();
});
now want to prevent user from selecting past dates.
so how do to that?
Try : datepicker is your element ID
$("#day_time_input").datetimepicker({
minDate: 0
});
<script type="text/javascript">
$(function(){
$('*[name=date1]').appendDtpicker({
"closeOnSelected": true,
"futureOnly": true
});
});
</script>
use futureOnly
in the file jquery.simple-dtpicker.js
find
var getDefaults = function() {
return {
"current": null,
"dateFormat": "default",
"locale": "en",
"animation": true,
"minuteInterval": 30,
"firstDayOfWeek": 0,
"closeOnSelected": false,
"timelistScroll": true,
"calendarMouseScroll": true,
"todayButton": true,
"dateOnly": false,
"futureOnly": false,
"minDate" : null,
"maxDate" : null,
"autodateOnStart": true,
"minTime":"00:00",
"maxTime":"23:59",
"onShow": null,
"onHide": null
};
};
and change
"futureOnly": true
from false to true.
you want to add futureOnly: true
$("#div").appendDtpicker({
futureOnly: true
});