2

I´m using SP2013 and i have a Shift Plan which colors the row from TODAY in yellow.

 var today = new Date();
        // zero out the time portion so we will only compare days
        today.setHours(0,0,0,0);

        var rows = ctx.ListData.Row;
        for (var i = 0; i < rows.length; i++) {

            // get the date set in your date YourDateField
            var itemDate = new Date(rows[i]['Datum']);
            // zero out the time portion so we only compare days
            itemDate.setHours(0,0,0,0);


            var rowId = GenerateIIDForListItem(ctx, rows[i]);
            var row = document.getElementById(rowId);

            console.log(today, itemDate)
            //if (itemDate == today) {
            if(itemDate.getTime() == today.getTime()) {
                row.style.backgroundColor = '#FAE300';

This works perfect if my Regional Setting ist US.

console.log(today, itemDate) says:
Wed Aug 10 2016 00:00:00 GMT+0200 (Mitteleuropäische Sommerzeit) 
Thu Oct 27 2016 00:00:00 GMT+0200 (Mitteleuropäische Sommerzeit)

But i want the Regional Setting to be German. So, if i Change the Region to German, i get the right Format for Todays Date with:

var newDate = today.toLocaleDateString();

But i habe no Idea, how to Change the Date in the Coloumn "Datum"

console.log(newDate, itemDate)
10.8.2016 
Tue Nov 08 2016 00:00:00 GMT+0100 (Mitteleuropäische Zeit)
10.8.2016 
Thu Dec 08 2016 00:00:00 GMT+0100 (Mitteleuropäische Zeit)
10.8.2016 
Invalid Date

With Region German, SP has the format mm.dd.yyyy. I have no Idea, how to Change this in the Format dd.mm.yyyy like it is in my Rows: 11.08.2016, 12.08.2016, 13.08.2016.

Any Ideas?

UPDATE 1 i used the code from Patrick with moment.js

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() 
{
SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
    OnPostRender: function(ctx) 
    {

        var rows = ctx.ListData.Row;

        for (var i = 0; i < rows.length; i++) 
        {

            var today = new Date();
            var dispDate = moment(today).format("DD.MM.YYYY");
            var date = rows[i]['Datum'];
            var dispDateFromList = moment(date).format("DD.MM.YYYY");

            console.log(dispDate); // today
            console.log(dispDateFromList); // date from list

            if(dispDate == dispDateFromList) 
            {       
                var rowId = GenerateIIDForListItem(ctx, rows[i]);
                var row = document.getElementById(rowId); 
                row.style.backgroundColor = '#FAE300';
            }

        }
    }
}); 
});

The today is working fine. Today it is: for each line 11.08.2016 But the reading from list doens´t work.

It´s a bit strange. Chrome Browser interprets it different than IE and FF. Chrome:

dispDate:11.08.2016
dispDateFromList:Invalid date
dispDate:11.08.2016
dispDateFromList:Invalid date
dispDate:11.08.2016
dispDateFromList:Invalid date
dispDate:11.08.2016
dispDateFromList:11.01.2016
dispDate:11.08.2016
dispDateFromList:11.02.2016
dispDate:11.08.2016
dispDateFromList:11.03.2016
dispDate:11.08.2016
dispDateFromList:11.04.2016

For IE and FF dispDateFromList is always an Invalid date

My Row in the List is:

  • Sorry, could you add please a bit more info about the context? Is it a custom view or a view / edit form, etc.? I assume the first one. – pholpar Aug 10 '16 at 9:07
  • Its a Custom SharePoint List with a Column named Date and Type Date+Time. Display Format is Friendly and onyl Date is shown – Pa Trick Aug 10 '16 at 9:29
  • I am using moment.js for all the date formating. Also german is needed in my environment. – Patrick Aug 10 '16 at 9:37
  • @Patrick thanks. For uesing moments, i have to "import" the moments.js also with JSLink to my SP Site - right? i have to use: moment(itemDate).format('L') or like that – Pa Trick Aug 10 '16 at 9:44
  • You could download the .js and upload it to your masterpage. Then you load it in your script just with the script source in the beginning of your script, or you load it directly over the web url. You can also load multiple .js files in the js-link property. – Patrick Aug 10 '16 at 9:48
1

There are 2 functions SharePoint provides making Date calculations and formatting a whole lot easier:

1

Here the script:

<script type="text/javascript" src="/_catalogs/masterpage/Somnio/js/moment.js"></script>
<script type="text/javascript">

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() 
{
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
        OnPostRender: function(ctx) 
        {

            var rows = ctx.ListData.Row;

            for (var i = 0; i < rows.length; i++) 
            {

                var today = new Date();
                var dispDate = moment(today).format("DD.MM.YYYY");
                var date = rows[i]["date"];
                var dispDateFromList = moment(date).format("DD.MM.YYYY");

                console.log(dispDate); // today
                console.log(dispDateFromList); // date from list

                if(dispDate == dispDateFromList) 
                {       
                    var rowId = GenerateIIDForListItem(ctx, rows[i]);
                    var row = document.getElementById(rowId); 
                    row.style.backgroundColor = '#FAE300';
                }

            }
        }
    }); 
});

</script>

And here the output (date column as friendly):

enter image description here

Here the output (date column not friendly):

enter image description here

I saved the script as an .txt and added it to the webpart over an content editor and in that webpart properties via the link to the .txt

Maybe not the "best" way, but a way, I could say, works.

Tested with an custom list, one title column (single line of text) and one column called date (date and time, shown only date and formated friendly) as your requirement.

Hope this helps.

  • Thank you. I also updated my code with moment.js but it doesn´t work for me. Same "Issue", See some more Infos in the Starting Post – Pa Trick Aug 11 '16 at 8:02
  • Did your Code also works, if you change the Region in the Site Settings to Germany (Berlin) this is my Problem at the Moment. – Pa Trick Aug 19 '16 at 8:30
  • jap. Habe es auf Brüssel, aber sollte egal sein – Patrick Aug 19 '16 at 10:08
  • Ich bin am verzweifeln. Ich hab das jetzt über den Scrip Editor lösen wollen. Habe also die moment with locals eingebunden: <script type="text/javascript" src=Linkto/moment.js"></script> und das Script läuft soweit druch. Allerdings liest er mir das Datum immer als mm.dd.yyyy aus der Liste. 19.08.2016 08.11.2016 19.08.2016 08.12.2016 19.08.2016 Invalid Date – Pa Trick Aug 19 '16 at 11:48
  • Wenn ich mit dem Script wieder auf Region US stelle - funktioniert es und im Log wird das Format DD.MM.YYYY geschrieben. Aber das angezeigte Datum in meiner SP Liste ist dann auf Englsich mm/dd/yyyy und das möchte ich nicht. (Andere Frage: Wieso steht bei dir Yesterday, Today und keine Datums Werte?) – Pa Trick Aug 19 '16 at 12:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.