How to select a tab in a $watch function when changing array? - javascript

I tried to use the tabs in Angular Material to facilitate the navigation between dates (just slide tabs to change date) and I have also a date picker to jump quickly to another date.
The loading work fine; I initialized the date picker with the current date and load tabs with each day in the current month.
If I select a date in another month, I reload the tabs to show appropriate dates. To do this, I've add a $watch on the date picker. This work fine but at the end of $watch I set tabSelected who is the index of the tab to display. That part don't work because it's like the digest process is not finish.
I think about a solution: just rename the tabs with new value. But is there a way to reset the array and set the index like I do:
$scope.$watch('dateSelected', function (newValue, oldValue) {
if ((newValue.getMonth() != oldValue.getMonth())
|| (newValue.getFullYear() != oldValue.getFullYear())) {
$scope.tabs = initialiseGamesTabs($scope.dateSelected);
}
$scope.tabSelected = getTabSelected();
});

The variable $scope.dateSelected itself is unchanged, because changing date only changes the variable' property. You have to watch the variable recursively, by adding the third argument to $watch as true.
Code:
$scope.$watch('dateSelected', function (newValue, oldValue) {
if ((newValue.getMonth() != oldValue.getMonth())
|| (newValue.getFullYear() != oldValue.getFullYear())) {
$scope.tabs = initialiseGamesTabs($scope.dateSelected);
}
$scope.tabSelected = getTabSelected();
}, true); // <----------- add true here
Further reading:
$watch an object

Related

Refresh other input fields when one of the fields is updated. Using Angularjs (Plunker attached)

Here is the plunker
http://plnkr.co/edit/Ll09uMtJEC0HqyGBRPjH?p=preview
As seen in the plunker, i have a date, user and car as input fields. I am able to select a date, user and car.
However if i now try to change the date, i want the user and car should be back to blank (no value should be shown)
how can i achieve this.
<html>
</html>
you can use ng-change directive, when the date is changed
in the input tag for date in your view :
ng-change="clearInputFields()"
in your controller :
$scope.clearInputFields = function() {
$scope.params.car = "";
$scope.params.user = {}; // or "" if it was a string
}
you can use ng-change in the datepicker. with adding for example ng-change="resetvalue()"
ng-change is to call function or do something when the value is changing
and in the function resetvalue
$scope.resetvalue = function(){
$scope.params.user = '';
$scope.params.car = '';
}

How to get end time on drop and eventDrop with external elements in FullCalendar?

I just wanted to know how can i get the end time as when I am console.log(event) then end time comes as null so it should return me some end time whenever I drop any event on week calendar time.
So how to get end time on drop of external element or even when move from one column to another column which will invoke eventDrop and at that time I also want end time.
Please don't edit my fiddle and create new one if possible and send it to me so that I can have a look as I spent lot of time yesterday to find out it but couldn't find any working solution on this.
Thank you in advance and here is the link:
jsfiddle.net/jimil/8hqe3wxd/3/
http://jsfiddle.net/dg9gp3e3/3/
If the external event does not have event data associated, then the defaultTimedEventDuration or defaultAllDayEventDuration will be used. In your fiddle, the defaultTimedEventDuration is being used since allDay is not set to true for the event. You can get the default value by
var defaultDuration = $('#calendar').fullCalendar('option', 'defaultTimedEventDuration');
defaultDuration = moment.duration(defaultDuration); // to add to date need to convert to a moment duration
An example for eventDrop
eventDrop: function(event, delta, revertFunc) {
//inner column movement drop so get start and call the ajax function......
console.log(event.start.format());
console.log(event.id);
var defaultDuration = moment.duration($('#calendar').fullCalendar('option', 'defaultTimedEventDuration')); // get the default and convert it to proper type
var end = event.end || event.start.clone().add(defaultDuration); // If there is no end, compute it
console.log('end is ' + end.format());
//alert(event.title + " was dropped on " + event.start.format());
},
For drop event:
drop: function(date) {
//Call when you drop any red/green/blue class to the week table.....first time runs only.....
console.log("dropped");
console.log(date.format());
console.log(this.id);
var defaultDuration = moment.duration($('#calendar').fullCalendar('option', 'defaultTimedEventDuration'));
var end = date.clone().add(defaultDuration); // on drop we only have date given to us
console.log('end is ' + end.format());
}
Another option is to use the forceEventDuration option, which will cause an end date to get set if none is specified.

Bootstrap Datepicker defaulting to sticky date

I am wondering if anybody has already coded an elegant solution whereby a blank Bootstrap Datepicker uses, by default, a previously selected date from another datepicker element within a DOM/UI (instead of defaulting to today's date with each new instance). Here is my solution so far -- which works -- using jQuery cookies:
//multiple elements with class 'DatePicker'
$('.DatePicker').datepicker({autoclose:true}).on('show',function() {
//getting cookie of last datepicker, if it exists
lastDate = $.cookie('lastDate') ? new Date($.cookie('lastDate')) : null;
//checking for blank DP and cookie combo, otherwise today is default
if ($(this).val() == '' && lastDate) {
//adding calendar day to date, as DP 'changeDate' event sets object to previous day
lastDate.setDate(lastDate.getDate()+1);
//overriding today-as-default behavior
$(this).datepicker('setDate',lastDate).datepicker('update');
}
}).on('changeDate',function(ev) {
//getting and setting cookie
selectedDate = ev.date;
$.cookie('lastDate',selectedDate);
});

Call a function as soon as date is entered via Calender

I have 2 text box readonly for Start Date and End Date. Date can only be entered through calender. Cannot be entered Manually. So I want to call a function as soon as date is entered via Calender in Start Date.
How Can I do it .
onchange and onblur events are not working as calender.js does not give any focus while inserting the date.
For IE onchangeproperty is working, but it is not working for Chrome and other browsers.
Can anyone help in this matter.
If you cannot find a reliable event - this is a hacky workaround, you can kick off a function via setInteval to check the value every xxx milliseconds to see if it has changed:
var sStartDate = document.getElementById('StartDate').value;
var iTimer = setInterval(function() {
if (document.getElementById('StartDate').value != sStartDate) {
clearInterval(iTimer);
// Do here the stuff needed to do when the date changed
}
}, 500)

How to validate a change in a cell and determine whether that change should be comited?

I have something like so:
CELL #0 CELL #1
------------------------
|start_date | end_date |
|----------------------|
|1/1/2012 |1/1/2013 | ROW#0
|----------------------|
I would like to assert that if the user clicks on (Row0,Cell0) and tries to change the start date, then the start date has to be less than the end date else the changes are not put through. Is this possible?
Currently when creating the columns, I add a 'validator' property and pass in the function below
startDateValidator(value){
/* value is new value, need to reference the end_date to make sure
that value < end_date but not possible in this column validator */
}
but as the comment points out, we are given the new value but no reference to the old data-item. Is there a way to get around this? I can change the source, but would want to avoid if possible.
It's possible to do it on the onCellChange event of the grid, I stripped up some code from a previous implementation I have so don't be too hard on me if it doesn't work first time... Assuming the ID of both your dates are start_date and end_date, then here is a working concept:
grid.onCellChange.subscribe(function(e,args) {
// do a proper validation of date
if (args.item.start_date < args.item.end_date) {
// post/save result to DB and re-render the grid
$.post('yourAjaxFile.php?action=update', args.item, function(ServerResponseUpt) {
// success, update the datagrid view on screen
grid.updateRow(args.row);
grid.updateRowCount();
grid.render();
});
}else {
// invalid, undo the changes from grid, this will put back orginal value
var command = commandUndoQueue.pop();
if (command && Slick.GlobalEditorLock.cancelCurrentEdit()) {
command.undo();
grid.gotoCell(command.row, command.cell, false);
}
}
});
Please note that the dates validation is obviously incorrect here, though the main answer is more focused on how to achieve the rest of the event
Use OnBeforeEdit instead of onCellChange
grid.onBeforeEditCell.subscribe(function (e, args) {
//returning true will update the cell and returning false will not update it
}

Categories