Change the format of a date to dd/MM/yyyy

Question

Anybody know how to adjust the current JS code and make it so the [ItemDate] shows the date in dd/MM/yyyy format instead of defaulted: MM/dd/yyyy HH:mm:ss

The code is copied from a website which converts XML into a readable HMTL format... trouble is only the date.format where I find it hard to implement the change.

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">  
SPClientTemplates.TemplateManager.RegisterTemplateOverrides({  
  Templates: {  
           Fields: {  
                'ItemsOverview': {   
                    'View': repeatingSectionViewTemplate  
                 }  
           }  
  }  
});  

function repeatingSectionViewTemplate(ctx) {  
   var xml = ctx.CurrentItem["ItemsOverview"];  
   var decodedxml = xml.DecodeXMLNotation();   
   var htm = "";  

   xmlDoc = $.parseXML( decodedxml );  
   $xml = $( xmlDoc );  
   $xml.find("Item").each(function() {  
      htm = htm + "<tr><td width='50px'>" + $(this).find("ItemNumber").text() + "</td><td width='140px'>" + $(this).find("ItemDescription").text() + "</td><td width='70px'>" + $(this).find("ItemStatus").text() + "</td><td>" + $(this).find("ItemDate").text()
 +"</td><td>" + $(this).find("CollectedByUser").text() +"</td></tr>"; 
   });  

   return "<table border='1px' width='550px'  style='border-collapse:collapse;'><tr><th align='left' width='50px'>Item</th><th align='left' width='180px'>Description</th><th align='left' width='70px'>Status</th><th align='left' width='70px'>Date</th><th align='left' width='170px'>Collected By</th></tr>" + htm +"</table>";  
};  

//Replaces html notation to their equivalent xml escape characters.  
String.prototype.DecodeXMLNotation = function () {  
   var output = this;  
    if ($.trim(output) != "") {  
        output = output.replace(/&apos;/g, "'").replace(/&quot;/g, '"').replace(/&gt;/g, '>').replace(/&lt;/g, '<').replace(/&amp;/g, '&');  
    }  
    else {  
        output = "";  
    }  
    return output;  
};  

</script>

use [Moment.js](https://momentjs.com/) – AZ_ Apr 19 '19 at 10:13 — AZ_, Apr 19 '19 at 10:13

score 0 · Answer 1 · answered Apr 19 '19 at 10:16

0

You'd have to create a function that reformats the date for you.

function formatDate(dateStr) {
    const d = new Date(dateStr);
    return d.getDate().toString().padStart(2, '0') + '/' + d.getMonth() + 1 + '/' + d.getFullYear() + ' ' + d.getHours() + ':' + d.getMinutes().toString().padStart(2, '0');
}

And instead of $(this).find("ItemDate").text() you'd use formatDate($(this).find("ItemDate").text())

answered Apr 19 '19 at 10:16

Tim VN

1,183
1
7
19

tried to implement your suggestion but then the whole script does not work anylonger... do I place the function `formateDate() { ...}` before or after at the end of the `function repeatingSectionViewTemplate(ctx) {...}` – Bucki Apr 19 '19 at 11:13
Outside of the function. Before or after does not matter. Do you get any errors? Open up your console by hitting CTRL + Shift + J to see if there are any. – Tim VN Apr 19 '19 at 11:41

score 0 · Answer 2 · answered Apr 19 '19 at 10:18

0

Best way to do this is Moment.js plugin. moment().format('DD/MM/YYYY);

var newDate = new Date();
console.log(newDate);
var formattedDate = moment().format('DD/MM/YYYY');
console.log(formattedDate);

<script src="https://momentjs.com/downloads/moment.js"></script>

answered Apr 19 '19 at 10:18

Rafalsonn

430
7
23

am I supposed to simply copy & paste the code within the function {...} area and reference the moment.js ... and this will then work out? because it is not in my case! – Bucki Apr 19 '19 at 11:20

score 0 · Answer 3 · answered Apr 19 '19 at 10:31

Either use the Moment.js plugin:
Install using:

npm install moment --save

Then use

var moment = require('moment');
let formatted = moment().format('DD/MM/YYYY');

in your file.

Or if you are doing it inline in html then use:

<script src="moment.js"></script>
<script>
    let formatted = moment().format('DD/MM/YYYY');
</script>

OR
You can use the following function that converts to the same format:

parseDate = (d) => {
        let date = new Date(d);        
        var mm = date.getMonth() + 1; // getMonth() is zero-based
        var dd = date.getDate();

        let newdate = [(dd>9 ? '' : '0') + dd + '/',
                    (mm>9 ? '' : '0') + mm+  '/',
                    date.getFullYear(),
                   ].join('');
        return newd + ' at ' + date.getUTCHours() + ':' + date.getUTCMinutes() + ':' + date.getUTCSeconds();
    }

Hope this helps.

score 0 · Answer 4 · answered Apr 19 '19 at 10:33

0

I think that "dd/MM/yyyy" is a french format:

var date = new Date('12/17/2018 03:24:00');

console.log(date.toLocaleDateString("fr-FR"));

answered Apr 19 '19 at 10:33

YouneL

8,152
2
28
50

Change the format of a date to dd/MM/yyyy

4 Answers4