I'm trying to figure out how to disable all the dates older than today, this gets tricky with the bootstrap datetime picker I am using below.
The examples allows for an array of dates to be passed when creating the object :
$(function () {
$('#datetimepicker7').datetimepicker({
defaultDate: "11/1/2013",
disabledDates: [
moment("12/25/2013"),
new Date(2013, 11 - 1, 21),
"11/22/2013 00:53"
]
});
});
How can I do this without calculating all the dates before today and passing that to the function ?
Doc : http://eonasdan.github.io/bootstrap-datetimepicker/#example8
I think you looked for a bad option....
Doc : Look at here : http://eonasdan.github.io/bootstrap-datetimepicker/#options
In this doc, the option's name is minDate
Extract :
minuteStepping:1, //set the minute stepping
minDate:`1/1/1900`, //set a minimum date <---- HERE
maxDate: ,
$(function () {
$('#datetimepicker7').datetimepicker({
defaultDate: moment("11/01/2013", "DD-MM-YYYY"),
minDate: moment()
});
});
Apart from setting the minDate property, you might also want to disable times before the current time. You would do this as follows:
First, you need to initialise the minDate parameter to midnight of the current day. Then, you bind an event listener to the dp.change event and reject any times that are earlier than the current time.
When rejecting such a time, you notify the user and reset the DateTimePicker time to the current time. I've created a function to do this:
// Argument obj is the used DateTimePicker object
// Argument f is the selected datetime by the user
// Argument n is the current datetime
var checkDate = function (obj, f, n) {
if (f.getTime() < n.getTime()+60*1000 && !open) {
open = true;
$('#message').dialog({
modal: true,
position: ['center', 'center'],
show: 'blind',
hide: 'blind',
width: 400,
dialogClass: 'ui-dialog-osx',
buttons: {
"I understand. Let me try again": function () {
$(this).dialog("close");
obj.data('DateTimePicker').setDate(n);
open = false;
}
}
});
}
}
Likewise, you still want to update the minDate and maxDate parameters upon dp.change too. Therefore, combining both checking the time and updating the properties, you would get:
jQuery("#startDate").on("dp.change", function (e) {
var f = new Date(e.date); var n = new Date();
checkDate(jQuery('#startDate'), f, n);
jQuery('#endDate').data("DateTimePicker").setMinDate(e.date);
});
jQuery("#endDate").on("dp.change", function (e) {
var f = new Date(e.date); var n = new Date();
checkDate(jQuery('#startDate'), f, n);
jQuery('#startDate').data("DateTimePicker").setMaxDate(e.date);
});
This will yield exactly what you are after:
You can find the full code in the jsFiddle I prepared for you:
GO TO THE DEMO
Related
I am trying to implement a date picker in angularjs and bootstrap but I am facing a few issues:
initial date is not set
when I am trying to open one date picker why does it open all the date pickers?
Here is my code:
http://plnkr.co/edit/elrOTfEOMmUkPYGmKTdW?p=preview
$scope.dateOptions = {
maxDate: new Date(2020, 5, 22),
minDate: new Date(1970,1,1),
startingDay: 1
};
function disabled(data) {
return true
}
$scope.open1 = function() {
$scope.popup1.opened = true;
};
$scope.formats = ['dd-MMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
$scope.popup1 = {
opened: false
};
Why does it open all date pickers when only one is clicked? See image below.
initial date is not set
This is because you are setting the model to a string, but it requires an actual date object. Do this:
date: {
date: 'date',
name: d // not this -> moment(d).format('DD-MMM-YYYY')
}
when I am trying to open one date picker why does it open all the date pickers?
Since you're using ng-repeat to create multiple inputs, you need to also use separate properties for the is-open attribute on each input. I would suggest adding an opened property to the items you're repeating, like this:
date: {
date: 'date',
name: d,
opened: false
}
Then, on the click event of the button, pass in the repeated item:
ng-click="open1(x)"
Next, set the is-open attribute:
is-open="x.opened"
Finally, set the opened property on it like this:
$scope.open1 = function(x) {
x.opened = true;
};
Here is the plnkr.
I am changing the cell background color of jan 12 using dayRender. How can I change one more cell background color in same month?
var data=[{
'specialDay':'2017-01-12'
}];
console.log(data)
var $calendar = $('#calendar').fullCalendar({
defaultView: 'month',
dayRender: function (date, cell) {
var today = new Date(data[0].specialDay);
if (date.getDate() === today.getDate() && date.getMonth() === today.getMonth()) {
cell.css("background-color", "red");
}
}
});
http://jsfiddle.net/CYnJY/937/
EDIT Attempt at using a loop, which still isn't working properly:
var data = [{
'name': 'xxx',
'specialDay': [{
'day': '2017-01-12'
}, {
'day': '2017-01-19'
}]
}];
console.log(data)
var $calendar = $('#calendar').fullCalendar({
defaultView: 'month',
dayRender: function(date, cell) {
$.each(data.specialDay, function(index, element) {
alert(element.day)
var today = new Date(data[0].specialDay);
if (date.getDate() === today.getDate() && date.getMonth() === today.getMonth()) {
cell.css("background-color", "red");
}
})
}
});
http://jsfiddle.net/CYnJY/941/
There were a couple of relatively simple things wrong with your attempt, both of which resulted in errors being displayed in the browser console:
I couldn't see any reason for data to be an array. SpecialDay within it is an array and that seemed to be sufficient for your purpose. Then in places you were trying to access data.specialDay, which didn't exist (it would have had to be data[0].specialDay because you had to access the first object of the data array, which then contained the specialDay property).
new Date(data[0].specialDay); The date is actually in the day property of the object(s) within the specialDay array. Putting an array into the Date constructor doesn't make a lot of sense - an array can't be parsed as a date. Ironically, right above it you had alerted element.day, which is what you needed to feed into the array, so you weren't far away from the correct solution to this one.
Here's a working version of the code:
var data = { //data is now an object
'name': 'xxx',
'specialDay': [{
'day': '2017-11-12'
}, {
'day': '2017-11-19'
}]
};
console.log(data)
var $calendar = $('#calendar').fullCalendar({
defaultView: 'month',
dayRender: function(date, cell) {
$.each(data.specialDay, function(index, element) {
//alert(element.day)
var today = new Date(element.day); //put the correct variable into the Date constructor
if (date.getDate() === today.getDate() && date.getMonth() === today.getMonth()) {
cell.css("background-color", "red");
}
})
}
});
See http://jsfiddle.net/CYnJY/947/ for a demo.
One other observation: you are using a very old version of fullCalendar (1.6.1) which is no longer supported. The current version is 3.6.2. I would advise you to upgrade as soon as you can. There may be a small number of changes you need to make, including upgrading your jQuery version, including moment.js etc, but it's all clear in the documentation. This link has a guide to upgrading from version 1.x to 2.0 and above: https://fullcalendar.io/wiki/Upgrading-to-v2/
I am using fullcalendar
http://fullcalendar.io/.
Everytime a user is selecting a timeslot in my calendar, I want to get all events that are in the calendar and transfer them in a hidden field in my view :
$('#calendar').fullCalendar({
});
I have a select callback :
select: function(start, end, id, allDay) {
var eventData = {
start: start,
end: end,
unique_id: guid(),
block: true,
editable: true,
backgroundColor: "#469278"
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
var all_events = $('#calendar').fullCalendar('clientEvents');
$.each(all_events, function(index, value) {
console.log(value.start["_d"]);
console.log(index);
var day = value.start["_d"].format("dddd");
var start_time = value.start["_d"].format("HH:mm");
var end_time = value.end["_d"].format("HH:mm");
var id = value.unique_id["_i"];
var slot = {
day: day,
start_time: start_time,
end_time: end_time,
id: id
};
array_all_events.push(slot);
$("#dispo_array").val(JSON.stringify(array_all_events));
});
$('#calendar').fullCalendar('unselect');
},
Here I am saying that everytime a user does a select action, I should get all events object :
var all_events = $('#calendar').fullCalendar('clientEvents');
I then iterate on each one of them, transform them into the right format and send them into my hidden field.
I don't understand why I get an error on this line :
var day = value.start["_d"].format("dddd");
Uncaught TypeError: value.start._d.format is not a function
.format method is dependent on moment library and hence you should use it as below:
var day = moment(value.start["_d"]).format('dddd')
Same goes with other variables.
I have an array of Javascript datetime objects which I want to display on a cal-heatmap. For this, i've done the following:
var startTimes = [] //array of datetimes to show
var cal = new CalHeatMap();
cal.init({
itemSelector: '.heat-map',
domain: 'day',
subDomain: 'hour',
range: range,
start: new Date(startTimes[0]),
highlight: new Date(startTimes[0])
});
for (s in startTimes) {
cal.highlight(cal.options.highlight.push(new Date(startTimes[s])));
}
This however, doesn't seem to work as only the first date gets marked.
Note that push returns the new length of the array and not the element you just added to it.
According to this and the doc of cal-heatmap/#highlight which states that the method expects a date, I guess your code should be:
for (s in startTimes) {
var date = new Date(startTimes[s]);
cal.options.highlight.push(date);
cal.highlight(date);
}
I have a problem with Jquery UI datepicker. When I try to set numberOfMonths options, the script fails with an error of "undefined is not a function". I'm using jquery ui 1.11.2. Here is my code:
$(document).ready(function () {
var fechaDefecto = new Date('2014/01/01');
var fechaFin = new Date('2014/08/31');
var SelectedDates = {};
SelectedDates[new Date('12/25/2014')] = new Date('12/25/2014');
SelectedDates[new Date('12/12/2014')] = new Date('12/12/2014');
SelectedDates[new Date('06/06/2014')] = new Date('06/06/2014');
$('#cal').datepicker(
{
beforeShowDay: function (date) {
var Highlight = SelectedDates[date];
if (Highlight) {
return [true, "Highlighted", Highlight];
} else {
return [true, '', ''];
}
},
minDate : fechaDefecto,
maxDate : fechaFin,
numberOfMonths: [2, 3]
});
});
If I set numberOfMonths to a number and not an array, there is no problem, but the thing is I need to display a semester with two rows of 3 calendars for my application.
I will really appreciate some help, please.
Another weird thing is that when I call the getter method for that option: $('#cal').datepicker('option', 'numberOfMonths'); I get a correct output because it shows the array ([2, 3]).
It seems like the last stable version of Jquery UI wasn't working in my case, I switched to using Jquery 1.8 and Jquery UI 1.9 and now it's working fine