Simple technique for date rendering using jslink?

Question

I'm using client side rendering/jslink for a list view. In most cases I want to completely transform the displayed value, for example This bit of my code which makes the version number a clickable link to open the version history window (instead of the three awkward links in the current way of getting that window!)

(function () {
    var overrideCtx = {}; 
    overrideCtx.Templates = {}; 
    overrideCtx.Templates.Fields = {
        ...
        "_UIVersionString": { "View": linkify },
        ...  
    }; 
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

function linkify(ctx){
    var listGuid = ctx.listName;
    var httpRoot = ctx.HttpRoot;
    var itemId = ctx.CurrentItem["ID"];
    var version = ctx.CurrentItem["_UIVersionString"];

    var url = '<a href="#" onclick="SP.UI.ModalDialog.showModalDialog('
                    +"{url: '"+httpRoot+"/_layouts/Versions.aspx?list="+listGuid+"&ID="+itemId+"&IsDlg=1'} );"
                    + 'return false;" style="float:right;">'+version+'</a>';

    return url  
}

Most of this is working well, but one thing I want to do is align my dates to the right. I don't have any issue with how SharePoint does the friendly dates, I just want them to align to the right. I was hoping there was a way with the csr/jslink to say, "Hey get the value you would normally render, return it to me, and let me make just a little modification to it." But there doesn't seem to be.

If you use csr then you have to do all the rendering yourself. Is that correct?

I found this thread about using momentjs and a lot of code to format dates in a specific way. But that seems like an awful lot of work just to make something align on the right.

Anybody have a solution (really for any kind of column) where the csr override can be more of an extension? Just get what SP would have returned and then manipulating that?

Answer 1

How about CSS 1 : text-align:right

There is nothing much simpler the Browser understands

      Fields: {
          "DueDate": {
              View: function(ctx, CurrentFieldSchema, CurrentItem, ListSchema){
                var name = CurrentFieldSchema.Name;
                var value = CurrentItem[name];
                return "<div style=width:300px;text-align:right>"+value+"</div>"; 
              },

Answer 2

Absolutely you can. Check out this answer for a big list of the default CSR rendering functions.

For the View, you should be able to get the default SP rendering for a Date field by using:

var defaultHtml = RenderFieldValueDefault(ctx);

Answer 3

You can set this in onPostRender function as follows

overrideCtx.OnPostRender = formatTable;
function formatTable(ctx) {
$(".ms-listviewtable tr").find("td:eq(<<date column index>>)").css("text-align","right")}

If you don`t want to hard code the date column index you can find using below code

or you can create a field templte as follows

overrideCtx.Templates.Fields = {
    'Created': {'View': dateFieldTemplate}     
};

function dateFieldTemplate(ctx) {
    var date = ctx.CurrentItem.Created;
    return "<label style='text-align: right'>"+date+"</label>";
}

function formatTable(ctx) {
var colIndex;
$(".ms-listviewtable th[role='columnheader']").each(function(index){
    var type= $(this).find("div.ms-vh-div").attr("fieldtype");

    if(type=="DateTime")
    {
        colIndex = index;
    }
});

$(".ms-listviewtable tr").find("td:eq(" + colIndex + ")").css("text-align","right");}