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.
Related
I want to filter by a date range instead of a single date using the ReactJS ag grid.
Here is my code sample in plnkr
componentDidMount() {
this.picker = flatpickr(this.refs.flatpickr, {
onChange: this.onDateChanged.bind(this),
dateFormat: 'd/m/Y',
mode:'range',
wrap: true,
});
So I have added mode:'range' to use a date range for the flatpickr date component that ag-grid uses in their examples
I want to be able to filter the rows in the plnkr example by using the date range. However, I can only pass in one of the dates (the from date) to the comparator function in the columnDef. If I try to pass in an array of dates, I receive an error since ag-grid is only expecting a single date object and not an array of date objects.
{
field: 'date',
minWidth: 190,
filter: 'agDateColumnFilter',
filterParams: {
comparator: function(filterLocalDateAtMidnight, cellValue) {
var dateAsString = cellValue;
var dateParts = dateAsString.split('/');
var cellDate = new Date(
Number(dateParts[2]),
Number(dateParts[1]) - 1,
Number(dateParts[0])
);
if (filterLocalDateAtMidnight.getTime() === cellDate.getTime()) {
return 0;
}
if (cellDate < filterLocalDateAtMidnight) {
return -1;
}
if (cellDate > filterLocalDateAtMidnight) {
return 1;
}
},
},
},
I suspect I need to overwrite one of the api methods to take in an array of date objects instead of a single date in the column definitions but I cannot seem to do this correctly.
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
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