Angular data-bs-datepicker directive + on date change - javascript

So I have a list of tasks.
Each task has a planned start date and a planned end date (plannedStartDate / plannedEndDate). I use ng-repeat to create my table.
I need a simple anchor which on click triggers a datepicker AND:
has the start date set to the plannedStartDate of the task (it is never null)
is bound to the plannedEndDate of the task, as in, whenever a value is selected, I have to somehow catch this event so I can update the DB value (plannedEndDate) of the task.
I have to show the date in format: dd/mm/yyyy
BUT:
both the plannedStartDate and plannedEndDate have this format: 2015-01-01T00:00:00.000
Currently, my datepicker looks like:
<a href="#" data-bs-datepicker
data-date-startDate="task.plannedStartDate" data-ng-model="task.plannedEndDate"
data-date-format="dd/mm/yyyy"
data-date-type="string">
{{task | dateIndication}}
</a>
I've tried with and without the date-format and date-type, but neither seem to help me. Also, the start date is automatically set to TODAY if I use this, even though the plannedStartDate of the task is not today. (I'm guessing it's a date formatting issue?)
I have tried putting a watch on the tasks array:
$scope.$watch('tasks', function (newVal) { /*...*/ }, true);
(and with a few more variations like using watch collection etc), but nothing!
The change is simply not caught.
(also, the dateIndication filter looks like:
.filter('dateIndication', function () {
return function (task) {
if (task.plannedEndDate) {
var plannedEndDate = moment(task.plannedEndDate);
return plannedEndDate.format('L');
} else {
return messages.dashboard.todosAndTasks.noDueDate();
}
}
})
I would very much need some help. Thank you!

var change;
change = function(date) {
var r;
r = date.match(/^\s*([0-9]+)\s*-\s*([0-9]+)\s*-\s*([0-9]+)(.*)$/);
return r[2] + "-" + r[3] + "-" + r[1] + r[4];
};
use this function and pass the date when function is call it will return the perfect format for datepicker and it shows perfectly fine and one more thing u need to split the date before passing the date then it works fine check it out and tell me what is diffrent

Related

Meteor - can't pass variables in subscribe

I'm having problems with Meteor's subscribe. My goal is to search through my collection given criteria from user input form and spit back documents that match. My code works when I hard code let's say Meteor.subscribe('byProductAndBrand',1, 2) or whatever number instead of day and month. I tried the same numbers for day and month from the website, and it doesn't return any results. My variables seem to get the values from the html form because they print in the console, but for some reason they don't get passed in subscribe.Any suggestions?
The ScheduleList collection is just a bunch of documents with a certain hour, day, and month.
In the client:
Template.myform.events({
'click #submit' : function(event, template){
event.preventDefault();
Session.set('day', template.find('#day').value);
Session.set('month', template.find('#month').value);
var day = Session.get('day');
console.log(day);
var month = Session.get('month');
console.log(month);
var instance = Template.instance();
if(instance.byProductAndBrandHandle != null){
instance.byProductAndBrandHandle.stop();
}
instance.byProductAndBrandHandle = Meteor.subscribe('byProductAndBrand',day, month);
}
});
In the server:
Meteor.publish('byProductAndBrand', function(day, month){
var d = day;
var m = month;
return ScheduleList.find({day:d},{month: m});
});
The query limit in your server publication is incorrect, it should be:
ScheduleList.find({day:d, month: m});
Incidentally, one easy way to debug issues like this is to put a debugger; statement in your Meteor.publish function and then:
$ meteor debug
from the console. Then launch the Node Inspector in your browser at
http://localhost:8080/debug?port=5858
Then you can validate the parameter parsing and also double check your logic interactively. Sander's answer is correct though.

Updating angular date by repeating event

I have an end date that a user can enter a date to end an scheduled event. However, I want a user to be able to type in a number of times an event can repeat before it ends. For example, if they say they want it to repeat weekly, for 4 weeks, then I want to be able to calculate the end date, and update that value. I'm actually not quite sure how I should even approach this being relatively new to angular.
http://jsfiddle.net/rXHzc/
I was thinking something like this?
function EventEditCtrl($scope) {
init();
function init() {
$scope.event = {
ActiveEndTimeDate: '',
Occurrences: '',
Repeated: ''
}
}
$scope.updateEndDate = function () {
//update event?
};
}
You just need to calculate the end date and assign it to the model. The hard part is doing date math in JavaScript. You can use a library like momentjs to simplify things...
$scope.updateEndDate = function () {
var endDate = moment().add($scope.event.Repeated, parseInt($scope.event.Occurrences));
$scope.event.ActiveEndTimeDate = endDate.format('YYYY/MM/DD');
};
Fiddle: http://jsfiddle.net/cxtNp/
This approach requires the use of ngChange to monitor changes to form values and trigger the update. It relies on having ngChange applied to all the places a change can be triggered and leaks a bit too much logic into the markup. A cleaner approach would be to trigger the change when the model changes.
One way to do this is using a watch...
$scope.$watch('[event.Repeated, event.Occurrences]', function () {
var endDate = moment().add($scope.event.Repeated, parseInt($scope.event.Occurrences));
$scope.event.ActiveEndTimeDate = endDate.format('YYYY/MM/DD');
});
Fiddle: http://jsfiddle.net/c92ud/

SharePoint/Javascript: comparing calendar date times in javascript

I am trying to find the best approach to comparing date/times using Javascript in order to prevent double booking on a SharePoint calendar. So I load an array with items that contain each event, including their start date/time and end date/time. I want to compare the start date/time and end date/time against the start/end date/times in the object, but I am not sure how to ensure that dates will not lapse.
like:
//date that is created from user controls
var startDate = new Date(startDat + 'T' + startHour + ':' + startMin + ':00');
var endDate = new Date(endDat+ 'T' + endHour+ ':' + endMin+ ':00');
for ( var i = 0; i < allEvents.length; i++ ) {
var thisEvent = allevents[i];
//having trouble with the compare
//i have tried silly ifs like
if (thisEvent.startDate >= startDate && thisEvent.endDate <= endDate) {
// this seems like I am going down the wrong path for sure
}
}
I then tried breaking apart the loaded object into seperate values (int) for each component of the date
var thisObj = { startMonth: returnMonth(startDate), startDay: returnDay(startDate), etc
but I am not sure this isn't just another silly approach and there is another that just makes more sense as I am just learning this.
I have a similar requirement in progress but chose to solve it at the booking stage, with jQuery/SPServices.
The code is still in build (ie not finished) but the method may help.
I attach an event handler to a column, then on selection, fetch all the dates booked in the same list to an array, then display that array on a rolling 12 month cal, as below.
I'm not checking to ensure a new booking doesn't overlap but a quick scan through the array on Pre-Save would provide a strict Go/No Go option for me. Relies on client side JS though, so not going to work in a datasheet or web services context.

Find the lapse of time

I'm trying to get the time lapse between 2 diferent hours....
function time()
{
var startime=(document.getElementById("horaentrada").value);
var endtime=(document.getElementById("horasaida").value);
document.getElementById("total_horas").value = (endtime-startime);
}
the idea is to fill a html input "total_horas" with the result. The function is triggered by an onchange event. The entry format is "HH:mm:ss", by instance 9:35:22.
I've tried a lot of things, but, no one works I get NaN.
Try this:
function time()
{
var startime=(document.getElementById("horaentrada").value);
var endtime=(document.getElementById("horasaida").value);
document.getElementById("total_horas").value= (parseFloat(endtime,10)-parseFloat(startime, 10));
}
Also, make sure to run the function after the dom is loaded.
Fiddle: http://jsfiddle.net/LnLdB/2/ . Just be gentle with the stuff you input in the boxes.
EDIT: Here is an updated fiddle, using moment.js. It subtracts hours in the format "HH:mm:ss": http://jsfiddle.net/LnLdB/13/

Add certain number of days to the already selected date (the date that is in the datepicker textbox currently)

I have already looked on several questions on stackoveflow but no one seems to be answering my question.
In my application, users often need to go to +1 or -1 day from the current selected date. For this, I want to make this process more quick by adding two image buttons for +1 and -1 operation on the right side and the left side respectively.
I have tried this:
$('#date').datepicker('setDate', '-1');
But it always set the +1 date from the current date (that is today -1, not the -1 from the selected date).
How can I achieve this..??
Any help would be appreciable.
Tried Later:
function AddDays(arg) {
var d = $('#date').datepicker('getDate');
var d = new Date(d.getYear(), d.getMonth(), d.getDay() + arg);
$('#date').datepicker('setDate', d);
}
And Calling this function as AddDays(1) and AddDays(-1) on onclick event of image but It produces very strage result.
For Example if I set the current date to 25-03-13 that is in dd-mm-y format then clicking on -1 button is setting the date to 28-02-0-87. Clicking it on again will result in no change. And clicking it third time will result 01-02-0-87.
I can't get the point. What kind of behavior is this..??
Finally I have written my solution. Here is the code
function AddDays(arg) {
var d = $('#date').datepicker('getDate');
d.setDate(d.getDate() + arg);
$('#date').datepicker('setDate', d);
}
Where date is the id of my jquery-ui datepicker.
I am still looking for any inline code (single line) that I can put directly in onclick event of my next and previous buttons.

Categories

Resources