We Keep Coding

time diffrence in double digit

i want to display TravelTimeHoursDiff and TravelTimeMinutesDiff in double digit now my time is shown as 7:0 i want to display like 07:00
if ($scope.DispatchStatus.ArrivalTime != undefined){
var today = $rootScope.getSysDate().split(" ");
var timeArrival = new Date(today[0] + ' ' + $scope.DispatchStatus.ArrivalTime);
var TravelTime = new Date(today[0] + ' ' + $scope.Route.TravelTime);
var timeArrivalHours = timeArrival.getHours();
var TravelTimeHoursDiff = timeArrivalHours - TravelTime.getHours() ;
var TravelTimeMinutesDiff = (timeArrival.getMinutes() - TravelTime.getMinutes());
if(TravelTimeHoursDiff < 0 || (TravelTimeHoursDiff <= 0 && TravelTimeMinutesDiff < 0) || (TravelTimeHoursDiff == 0 && TravelTimeMinutesDiff == 0)){
$scope.formvalidationbit = $scope.DispatchStatusAddForm[fieldName].$invalid = true;
angular.element('#' + fieldName).addClass('ng-invalid');
angular.element('#' + fieldName).removeClass('ng-valid');
$scope.DispatchStatusAddForm.$valid = false;
var errorbit = 1;
}else{
if (isNaN(TravelTimeHoursDiff)) {
TravelTimeHoursDiff = '--';
}
if (isNaN(TravelTimeMinutesDiff)) {
TravelTimeMinutesDiff = '--';
}
if(TravelTimeMinutesDiff <0){
TravelTimeMinutesDiff = TravelTimeMinutesDiff * (-1);
}
$scope.TravelTime = TravelTimeHoursDiff + ':' + TravelTimeMinutesDiff;
}
}

Just add leading 0 to values smaller then 10, something like:
let addLeadingZero(v){
return v < 10 ? ("0" + v) : v;
}
$scope.TravelTime = addLeadingZero(TravelTimeHoursDiff) + ':' + addLeadingZero(TravelTimeMinutesDiff);

Ignore Sundays from jQuery date range picker

I'm using the following jQuery date range picker library : http://longbill.github.io/jquery-date-range-picker/
I would like to remove / hide all Sundays from all date range pickers while keeping a normal behavior on the date range pickers.
I tried to do something with beforeShowDay option :
beforeShowDay: function(t) {
var valid = t.getDay() !== 0; //disable sunday
var _class = '';
// var _tooltip = valid ? '' : 'weekends are disabled';
return [valid, _class];
}
but it only "disables" all Sundays whereas I want to remove / hide them:
Here's the fiddle I'm working on : https://jsfiddle.net/maximelafarie/dnbd01do/11/
EDIT:
Updated fiddle with #Swanand code: https://jsfiddle.net/maximelafarie/dnbd01do/18/

You could do it with just a little CSS but it does leave a gap:
.week-name th:nth-child(7),
.month1 tbody tr td:nth-child(7) {
display: none;
}
Hope this helps a little.

You need do changes in two functions in your daterangepicker.js file:
createMonthHTML()
function createMonthHTML(d) { var days = [];
d.setDate(1);
var lastMonth = new Date(d.getTime() - 86400000);
var now = new Date();
var dayOfWeek = d.getDay();
if ((dayOfWeek === 0) && (opt.startOfWeek === 'monday')) {
// add one week
dayOfWeek = 7;
}
var today, valid;
if (dayOfWeek > 0) {
for (var i = dayOfWeek; i > 0; i--) {
var day = new Date(d.getTime() - 86400000 * i);
valid = isValidTime(day.getTime());
if (opt.startDate && compare_day(day, opt.startDate) < 0) valid = false;
if (opt.endDate && compare_day(day, opt.endDate) > 0) valid = false;
days.push({
date: day,
type: 'lastMonth',
day: day.getDate(),
time: day.getTime(),
valid: valid
});
}
}
var toMonth = d.getMonth();
for (var i = 0; i < 40; i++) {
today = moment(d).add(i, 'days').toDate();
valid = isValidTime(today.getTime());
if (opt.startDate && compare_day(today, opt.startDate) < 0) valid = false;
if (opt.endDate && compare_day(today, opt.endDate) > 0) valid = false;
days.push({
date: today,
type: today.getMonth() == toMonth ? 'toMonth' : 'nextMonth',
day: today.getDate(),
time: today.getTime(),
valid: valid
});
}
var html = [];
for (var week = 0; week < 6; week++) {
if (days[week * 7].type == 'nextMonth') break;
html.push('<tr>');
for (var day = 0; day < 7; day++) {
var _day = (opt.startOfWeek == 'monday') ? day + 1 : day;
today = days[week * 7 + _day];
var highlightToday = moment(today.time).format('L') == moment(now).format('L');
today.extraClass = '';
today.tooltip = '';
if (today.valid && opt.beforeShowDay && typeof opt.beforeShowDay == 'function') {
var _r = opt.beforeShowDay(moment(today.time).toDate());
today.valid = _r[0];
today.extraClass = _r[1] || '';
today.tooltip = _r[2] || '';
if (today.tooltip !== '') today.extraClass += ' has-tooltip ';
}
var todayDivAttr = {
time: today.time,
'data-tooltip': today.tooltip,
'class': 'day ' + today.type + ' ' + today.extraClass + ' ' + (today.valid ? 'valid' : 'invalid') + ' ' + (highlightToday ? 'real-today' : '')
};
if (day === 0 && opt.showWeekNumbers) {
html.push('<td><div class="week-number" data-start-time="' + today.time + '">' + opt.getWeekNumber(today.date) + '</div></td>');
}
if(day == 0){
html.push('<td class="hideSunday"' + attributesCallbacks({}, opt.dayTdAttrs, today) + '><div ' + attributesCallbacks(todayDivAttr, opt.dayDivAttrs, today) + '>' + showDayHTML(today.time, today.day) + '</div></td>');
}else{
html.push('<td ' + attributesCallbacks({}, opt.dayTdAttrs, today) + '><div ' + attributesCallbacks(todayDivAttr, opt.dayDivAttrs, today) + '>' + showDayHTML(today.time, today.day) + '</div></td>');
}
}
html.push('</tr>');
}
return html.join('');
}
In this function i have added class hideSunday while pushing the element.
The 2nd function is getWeekHead():
function getWeekHead() {
var prepend = opt.showWeekNumbers ? '<th>' + translate('week-number') + '</th>' : '';
if (opt.startOfWeek == 'monday') {
return prepend + '<th>' + translate('week-1') + '</th>' +
'<th>' + translate('week-2') + '</th>' +
'<th>' + translate('week-3') + '</th>' +
'<th>' + translate('week-4') + '</th>' +
'<th>' + translate('week-5') + '</th>' +
'<th>' + translate('week-6') + '</th>' +
'<th class="hideSunday">' + translate('week-7') + '</th>';
} else {
return prepend + '<th class="hideSunday">' + translate('week-7') + '</th>' +
'<th>' + translate('week-1') + '</th>' +
'<th>' + translate('week-2') + '</th>' +
'<th>' + translate('week-3') + '</th>' +
'<th>' + translate('week-4') + '</th>' +
'<th>' + translate('week-5') + '</th>' +
'<th>' + translate('week-6') + '</th>';
}
}
In this file, I have added class to week-7 header.
CSS:
.hideSunday{display:none;}
Please note, I have not checked all the scenario but it will do trick for you.

I finally ended up by letting the Sundays appear (but completely disabling them).
These questions inspired me :
Moment.js - Get all mondays between a date range
Moment.js: Date between dates
So I created a function as follows which returns an array that contains the "sundays" (or whatever day you provide as dayNumber parameter) in the date range you selected:
function getDayInRange(dayNumber, startDate, endDate, inclusiveNextDay) {
var start = moment(startDate),
end = moment(endDate),
arr = [];
// Get "next" given day where 1 is monday and 7 is sunday
let tmp = start.clone().day(dayNumber);
if (!!inclusiveNextDay && tmp.isAfter(start, 'd')) {
arr.push(tmp.format('YYYY-MM-DD'));
}
while (tmp.isBefore(end)) {
tmp.add(7, 'days');
arr.push(tmp.format('YYYY-MM-DD'));
}
// If last day matches the given dayNumber, add it.
if (end.isoWeekday() === dayNumber) {
arr.push(end.format('YYYY-MM-DD'));
}
return arr;
}
Then I call this function in my code like that:
$('#daterange-2')
.dateRangePicker(configObject2)
.bind('datepicker-change', function(event, obj) {
var sundays = getDayInRange(7, moment(obj.date1), moment(obj.date1).add(selectedDatesCount, 'd'));
console.log(sundays);
$('#daterange-2')
.data('dateRangePicker')
.setDateRange(obj.value, moment(obj.date1)
.add(selectedDatesCount + sundays.length, 'd')
.format('YYYY-MM-DD'), true);
});
This way, I retrieve the amount of sundays in the date range I selected. For example, if there's two sundays in my selection (with sundays.length), I know I have to set two additional workdays to the user selection (in the second date range picker).
Here's the working result:
With the above screenshot, you can see the user selected 4 workdays (5 with sunday but we don't count it). Then he click on the second calendar and the 4 workdays automatically apply.
Here's the result if the period apply over a sunday (we add one supplementary day and Xfor X sundays in the period):
Finally, here's the working fiddle: https://jsfiddle.net/maximelafarie/dnbd01do/21/
I want to thank any person that helped me. The question was hard to explain and to understand.

You can also do it by setting a custom css class and use it in beforeShowDay like below
.hideSunDay{
display:none;
}
beforeShowDay: function(t) {
var valid = t.getDay() !== 0; //disable sunday
var _class = t.getDay() !== 0 ? '' : 'hideSunDay';
// var _tooltip = valid ? '' : 'weekends are disabled';
return [valid, _class];
}
But it only hides the sundays beginning from current day.
Here is a working fiddle
https://jsfiddle.net/dnbd01do/16/

Working on a clock script. I need to add a Zero in front of single digits

As easy as it may sound to a seasoned coder. I am a newbie trying to implement this on my clock page. It can contain errors. The idea is to generate a zero in front of single digits (like "02" instead of "2") for display purposes. It works fine with double digits.
This is what I got, but doesn't do the trick. Includes commented lines of different tries I have done. I would appreciate any input guys.
<script>
$(function() {
getdata();
myinterval = setInterval(getdata, 30000);
});
function getdata(){
var dt = new Date();
console.log(dt.getMinutes());
var myhr = dt.getHours();
var mymin = dt.getMinutes();
//if(myhr < 10) myhrstr = '0' + myhr.toString(); else myhrstr = myhr.toString();
//if(myhr.toString().length < 2) myhrstr = '0' + myhr.toString(); else myhrstr = myhr.toString();
//if(myhr.toString().length < 2) myhr = "0"+myhr;
if(myhr.toString().length == 1) myhrstr = "0" + myhr.toString(); else myhrstr = myhr.toString();
//if(mymin < 10) myminstr = '0' + mymin.toString(); else myminstr = mymin.toString();
//if(mymin.toString().length < 2) myminstr = '0' + mymin.toString(); else myminstr = mymin.toString();
//if(mymin.toString().length < 2) mymin = "0"+mymin;
if(mymin.toString().length == 1) myminstr = "0" + mymin.toString(); else myminstr = mymin.toString();
var mystr = myhrstr + myminstr;
$.ajax(
{
url:"clock.php?action=getdata&dt="+mystr,
success:function(result){
$('#content').html(result);
}
}
);
}
</script>

What makes you think your code isn't working? It works fine.
Here's a demo:
function FakeDate() {
this.getHours = function() {
return Math.round(Math.random() * 23);
}
this.getMinutes = function() {
return Math.round(Math.random() * 59);
}
}
var dt = new FakeDate(); // use fakeDate for random time generations
var myhr = dt.getHours();
var mymin = dt.getMinutes();
if (myhr.toString().length == 1) myhrstr = "0" + myhr.toString();
else myhrstr = myhr.toString();
if (mymin.toString().length == 1) myminstr = "0" + mymin.toString();
else myminstr = mymin.toString();
var mystr = myhrstr + myminstr;
console.log(mystr);
One way you can simplify this code is, since you are not using the numeric values, you can call toString right away on the getHours and getMinutes methods. For the same reason there's also no need for extra variables to hold the string values, you can just use the same variable when appending the "0".
// get the strings representing hours and minutes
var myhr = dt.getHours().toString();
var mymin = dt.getMinutes().toString();
// prepend them with zeros if needed
if (myhr.length == 1) myhr = "0" + myhr;
if (mymin.length == 1) mymin = "0" + mymin;
// concatenate them to a 4 digit value
var mystr = myhr + mymin;
Here's a demo:
function FakeDate() {
this.getHours = function() {
return Math.round(Math.random() * 23);
}
this.getMinutes = function() {
return Math.round(Math.random() * 59);
}
}
var dt = new FakeDate(); // use fakeDate for random time generations
// get the strings representing hours and minutes
var myhr = dt.getHours().toString();
var mymin = dt.getMinutes().toString();
// prepend them with zeros if needed
if (myhr.length == 1) myhr = "0" + myhr;
if (mymin.length == 1) mymin = "0" + mymin;
// concatenate them to a 4 digit value
var mystr = myhr + mymin;
console.log(mystr);

simple trick to pad single digit with zero
('0' + 1).slice(-2) // 01
('0' + 23).slice(-2) // 23

var mystr;
if(myhr < 10 ) {
mystr = "0" + myhr.toString();
} else {
mystr = myhr.toString();
}
if (mymin < 10) {
mystr += ":0" + mymin.toString();
} else {
mystr += ":" + mymin.toString();
}

Date listing between 2 dates (from -> to)

I want to list all dates between 2 dates like..
list_dates('06/27/2013','07/31/2013');
This function will return all dates between 06/27/2013 - 07/31/2013 in array like..
['06/27/2013','06/28/2013','06/29/2013','06/30/2013','07/01/2013','...so_on..','07/31/2013'];
This function will work in all cases , Like older to newer , newer to older , or same dates like..
list_dates('06/27/2013','07/31/2013');
list_dates('07/31/2013','06/27/2013');
list_dates('07/31/2013','07/31/2013');
I do like...
function list_dates(a,b) {
var list = [];
var a_date = new Date(a);
var b_date = new Date(b);
if (a_date > b_date) {
} else if (a_date < b_date) {
} else {
list.push(a);
}
return list;
}
Demo : http://jsfiddle.net/fSGQ6/
But how to get dates between 2 dates ?

try this
list_dates('11/27/2013', '12/31/2013');
list_dates('03/21/2013', '02/14/2013');
list_dates('07/31/2013', '07/31/2013');
function list_dates(a, b) {
var list = [];
var a_date = new Date(a);
var b_date = new Date(b);
if (a_date > b_date) {
while (a_date >= b_date) {
var date_format = ('0' + (b_date.getMonth() + 1)).slice(-2) + '/' + ('0' + b_date.getDate()).slice(-2) + '/' + b_date.getFullYear();
list.push(date_format);
b_date = new Date(b_date.setDate(b_date.getDate() + 1));
}
} else if (a_date < b_date) {
while (b_date >= a_date) {
var date_format = ('0' + (a_date.getMonth() + 1)).slice(-2) + '/' + ('0' + a_date.getDate()).slice(-2) + '/' + a_date.getFullYear();
list.push(date_format);
a_date = new Date(a_date.setDate(a_date.getDate() + 1));
}
} else {
list.push(a);
}
console.log(list);
}
UPDATE: as poster requirement

var start = new Date(2013,06,27);
var end = new Date(2013,07,31);
var result =[];
var loop = true;
while(loop){
console.log(start.toISOString);
result.push(start);
start.setDate(start.getDate()+1)
if(start>end){
loop = false;
}
}

Date.prototype.getShortDate = function () {
// Do formatting of string here
return (this.getMonth() + 1) + "/" + this.getDate() + "/" + this.getFullYear();
}
function list_dates(a, b) {
var a_date = new Date(a),
b_date = new Date(b),
list = [a_date.getShortDate()],
change = (a_date > b_date ? -1 : 1);
while (a_date.getTime() != b_date.getTime()) {
a_date.setDate(a_date.getDate() + change);
list.push(a_date.getShortDate());
}
return list;
}

OOP JS: function incrementing date repeatedly, and I don't know why?

Following on from my previous thread, I went on to design the following Objects.
/* --- LEAP Namespace --- */
var LEAP = {};
/* --- LEAP.Schedule Object --- */
LEAP.Schedule = function(){//init
this.weeks = [];
this.calculateWeeks();
};
LEAP.Schedule.prototype.pad = function (n) {
return n>9 ? n : "0"+n;
};
LEAP.Schedule.prototype.calculateWeeks = function(){
this.date = new Date ( 2011, 8, 5 ); // First week of new school year
this.num = 36; // Calendar number of this week
this.weeks.push(new LEAP.Schedule.week(this.date, this.num));
for (var i = 1; i < 51; i++) {
var week = i * 7;
var updated_date = new Date ();
updated_date.setDate(this.date.getDate() + week);
if (this.num > 51) {
this.num = 0;
}
this.num++;
this.weeks.push(new LEAP.Schedule.week(updated_date, this.num));
}
};
LEAP.Schedule.prototype.getWeeks = function(){
return this.weeks;
};
/* --- LEAP.Schedule.week Object --- */
LEAP.Schedule.week = function(n_date, n_week){
this.week = n_week;
this.date = n_date;
this.year = this.date.getFullYear();
var JSMonth = this.date.getMonth();
JSMonth += 1;
this.month = JSMonth;
this.day = this.date.getDate();
};
LEAP.Schedule.week.prototype.getJSDate = function(){
return this.date;
};
LEAP.Schedule.week.prototype.getStartDate = function(){
return this.year + "-" + LEAP.Schedule.pad(this.month) + "-" + LEAP.Schedule.pad(this.day);
};
LEAP.Schedule.week.prototype.getEndDate = function(){
var EndOfWeek = this.date;
EndOfWeek.setDate(this.date.getDate() + 6);
var year = EndOfWeek.getFullYear();
var month = LEAP.Schedule.pad(EndOfWeek.getMonth() + 1);
var day = LEAP.Schedule.pad(EndOfWeek.getDate());
return year + "-" + month + "-" + day;
};
LEAP.Schedule.week.prototype.getLabel = function(){
return "Week " + this.week + ": " + this.day + (this.day==1||this.day==21||this.day==31?"st":this.day==2||this.day==22?"nd":this.day==3||this.day==23?"rd":"th") + " " + ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][this.month-1] + " " + this.year;
};
I'm now using a <SELECT> box to filter some other data, which works successfully, apart from the fact that every time the $('#filter').change() event is triggered, the dates are being incremented.
WeeklyUpdate.init = function() {
UWA.Data.getJson(WeeklyUpdate.URL + "?cmd=getPointTotals", WeeklyUpdate.getTotalPoints);
var Scheduleobject = new LEAP.Schedule();
var weeks = Scheduleobject.getWeeks();
WeeklyUpdate.displayWeekFilter(weeks);
}
WeeklyUpdate.displayWeekFilter = function(weeks) {
var WeekFilterDisplayHTML = '<select id="filter"><option>Click here</option><option value="all">- All, to date</option>';
var now = new Date();
for (var i = 0; i < weeks.length; i++) {
if (weeks[i].getJSDate() < now) {
var label = weeks[i].getLabel();
WeekFilterDisplayHTML += '<option value="' + i + '">' + label + '</option>';
}
}
WeekFilterDisplayHTML += '</select>';
$('div#filter').html(WeekFilterDisplayHTML);
//WeeklyUpdate.filterPointTotalsByStaff( $(this).val() )
$("select#filter").change( function() { WeeklyUpdate.filterPointTotalsByStaff( weeks, $(this).val() ) } );
}
WeeklyUpdate.filterPointTotalsByStaff = function(weeks, val) {
if (val >= 0 && val != "all") {
var StartDate = weeks[val].getStartDate();
var EndDate = weeks[val].getEndDate();
If I add alert(StartDate + ' // ' + EndDate); after those variables, I can see that the EndDate is being incremented every time, rather than being incremented once and then consistently returning the correct EndDate regardless of how many times it is selected from the SELECT box. The StartDate on the other hand works correctly every time.
What should happen is that this.date (which returns a JS date Object for the week being requested) should be the start of the week, then the getEndDate() function should increment that date by 6 days and return the correct date in a MySQL-compatible format. This shouldn't increment every time its <OPTION> is selected from the SELECT box; it should always return the same date.
I'm guessing that it's something to do with the way I've used EndOfWeek = this.date;, but I don't understand why or how.
Many thanks again.

Probably doesn't matter here but is bad form anyway:
for (i = 1; i < 51; i++) {
The variable i should be declared.
In the statement (my wrapping):
$("select#filter").change( function() {
WeeklyUpdate.filterPointTotalsByStaff( weeks, $(this).val() )
});
You do not show how weeks is initialised or assigned a value. There is a weeks property of LEAP.Schedule instances, but above it is used in the context of a global variable.