We Keep Coding

Moment object won't increment by days when cloned and used with DateTimePicker

I have the following code:
function localDateHandler(momentObj) {
let start = momentObj.clone();
let update = start.add(10, 'days');
console.log(update); // Does not change, SHOULD be ten days more than momentObj
console.log(momentObj);
}
I am using the following React component to change the date:
<DateTimePicker value={eventDate} onChange={localDateHandler}/>
The info for the component is here: https://material-ui-pickers.dev/
When I change the date the date is not incremented by the number of days listed in the first block of code (I explain more in the comments)
Thank you!

I reproduce and this works with not any problem. What you have seen maybe caused by one of these case:
You might have briefly looked at _i of moment object, this might be the initial object (which could derive from momentObj.clone()), instead, you should look _d instead (moment object internal properties doc)
The most commonly viewed internal property is the _d property that holds the JavaScript Date that Moment wrappers.
You might not have use the right version of peer dependency for moment adapter (installation guide)
Important: For material-ui-pickers v3 use v1.x version of #date-io adapters.
Codesandbox for demonstration, you should open the log to check

JS code works as it should (the comment is clearly false):
function localDateHandler(momentObj) {
let start = momentObj.clone();
let update = start.add(10, 'days');
console.log(update); // Does not change, SHOULD be ten days more than momentObj
console.log(momentObj);
}
localDateHandler(moment());
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
Yields in my case:
"2020-08-24T22:29:35.347Z"
"2020-08-14T22:29:35.347Z"
I'm guessing something wrong with rendering? Then I suspect you'd have to modify eventDate somewhere in localDateHandler, not some local variable not bound to the widget.

show certain date in date picker

I'm using pickmeup datePicker in my Angular project, and it works good and stable but I faced a problem. When I'm trying to set a particular date, picker breaks and/or disappears. I used the method set_date from the documentation but I think I'm missing something.
I use the following code
showDate(timestamp: number) {
const timeString = timestamp.toString();
this.pickerInstance.set_date(new Date(timeString));
}
I have a stackblitz code template here.
So the idea is, I want to have a button when I'm pressing on it, it passes timestamp value to showDate function and after that datePicker shows my date.
I don't want to use jquery here, I believe this could be done without it. But maybe I'm wrong.
Any ideas, comments, help is welcome? thank you.

The constructor of Date needs a number not a a string.
You need to call this.pickerInstance.update() after the update
public showDate(timestamp: number) {
this.pickerInstance.set_date(new Date(timestamp));
this.pickerInstance.update();
}

SAPUI5 GeoMap add Route

How can I add a route to a UI5 geomap using js? I didn't find anything in the samples or the documentation.
Has it something to do with the method addGeoJsonLayer()?
Thanks in advance for your help :)

I found a way to do it. You have to create a VO Object as it is outlined here: https://sapui5.hana.ondemand.com/test-resources/sap/ui/vbm/bestpractices.html
then add it using addVo()
like it is outlined here https://sapui5.hana.ondemand.com/docs/api/symbols/sap.ui.vbm.GeoMap.html#addVo

Example:
var oRouteCollection = new sap.ui.vbm.Routes
next
oGeoMap.addVo(oRouteCollection);
Source: Sygyzmundovych
My walk during QCon London 2018

Calculate date difference in jQuery

The question is; there are 2 fields in my application, one is date (Field1) and second is a label (Field2). So, I want that when user selects a date in field 1, then field 2 should be automatically populated (current date - date from field 1).
Can anyone help on how to implement it.
I'm using jQuery to display date:
// This displays the date dialog when user clicks on Field1
$('#Field1').click(function () {
$('#Field1').simpleDatepicker();
});
// Tried following code but it didn't worked
$('#Field1').click(function () {
$('#Field1').simpleDatepicker({
onSelect: function () {
$('#Field2').value(calculateDays($('#Field1').toString))
}
});
});
function calculateDays(dateString) {
var today = new Date();
var inputDate = new Date(dateString);
var days = today - inputDate;
return days;
};
This may look like pathetic code to some folks but I'm just a beginner, so any suggestions/comments are welcome.
Also please tell me if this can be done using html only and no need to go to jQuery. It is my understanding that the calculating days (difference between dates) code will go in jQuery since this needs to be fired after selecting date ('onSelect' event). Please correct if wrong.

I'm assuming that you're trying to use Karl Seguin's jquery.simpleDatePicker (it came top when searching for "simpledatepicker" on Google).
As Jimbo remarks in the comments, it's hard to advise on an MVC approach here — you say you want to do this purely with HTML, but HTML alone can't dictate behaviour (I'd say that's extremely un-MVC). HTML5 forms do allow some limited behavioural control (validation etc), and they also offer <input type="date"/>, but none of these help your situation.
So for this answer I'm just going to fix the mistakes in your code:
The plugin is initialised with the simpleDatePicker jQuery method — you forgot to capitalise the 'P';
The plugin itself caters for the click event. You should initialise it directly without waiting for user input;
There was no onSelect initialisation option in the source code: I chose to use a change event listener on the input to capture this;
You use the jQuery method value — that's native DOM Javascript — you should be using val instead;
toString won't work on DOM elements or jQuery objects — again, use the val method;
The native Date object can't parse dates in arbitrary formats — nor would your code produce a number of days if it did (it would just produce the difference in milliseconds). For this kind of functionality you should use a good date library: I've opted for Moment.
Resulting code (as demonstrated here):
$('#Field1')
.simpleDatePicker()
.on('change', function passValue(){
$('#Field2').val(calculateDaysFromNow($('#Field1').val()))
});
function calculateDaysFromNow(dateString){
return moment.duration(moment(dateString,'MMM DD YYYY').diff()).days();
}
A bit of elaboration on how I've used moment:
First of all, we want to parse #Field1's formatted date for an actual quantifiable date object:
moment(dateString,'MMM DD YYYY')
Next, we want to differentiate that from now. Like Date, moment assumes now if we pass no argument:
moment(dateString,'MMM DD YYYY').diff()
We don't want this as a date, but as a duration, so we'll pass it to moment's duration method:
moment.duration(moment(dateString,'MMM DD YYYY').diff())
…and finally, we want this expressed in days:
moment.duration(moment(dateString,'MMM DD YYYY').diff()).days()

I'm not sure but this:
$('#Field2').value(calculateDays($('#Field1').toString)) should be like this:
$('#Field2').value(calculateDays($('#Field1').val())) or $('#Field2').value(calculateDays($('#Field1').text()))

Here is solution for setting same date in second field.
Link:jquery: using two datepicker with two fields ( field 1 , field2 + 1 day ) like booking.com
Change the format according to your need.

Removing the day from a date string with jQuery

I am trying to remove the "day" from every possible date occurrence on a page.
This is to make jQuery turn every date in the format of "08/22/2012" into "08/2012"
I was able to do this with this code: Replacing wildcard text using jquery
See my fiddle for more information: http://jsfiddle.net/CfZjF/223/
But it just isn't working within this table layout, regardless of what I have tried.
Another problem will be to specify the day specifically (maybe with wildcards?)-- that is the 2 numbers between the forward-slashes: /xx/, but please see the fiddle for more info.
Any ideas on how I can pull this off?

Try
str.replace(/\/\d+\//g, "/");
Or be more specific by replacing /(\d{2})\/\d{2}\/(\d{4})/g with "$1/$2" or something…
(Updated fiddle)

I think you should individually traverse the table cells instead of trying to globally muck with the entire rows HTML.
This assumes that your data is formatted as in your jsFiddle.
Updated fiddle: http://jsfiddle.net/GKrCS/
$('tr').each(function(){
$('td',this).not(':first').text(
function(){
return $(this).text().replace(/\/[0-9]+\//,'/');
});
});

Since all your dates are in the form xx/xx/xxxx, using a simple split() would always split it into an array with these values:
xx,xx,xxxx
So, something like this:
var totalDate = $("whateverYourDateSelectorMightBe");
var daysInMiddle = totalDate.val().ToString().split(",")[1];
so then you could do:
totalDate.val(totalDate.val().ToString().replace(daysInMiddle + "/",""));
Note that there are much cleaner ways to do this. I just did it this way because I think it better explains what I was trying to do.