DataTables如何只显示日期而不是datetime。

时间:2022-12-24 14:25:32

I'm using server side processing as per the Django example in DataTables. I return datetime values in this format 'yyyy-mm-dd hh:mm:ss'. These date time values are currently displayed like this (for example):

我使用的是DataTables中Django示例中的服务器端处理。我以这种格式返回datetime值'yyyy-mm-dd hh:mm:ss'。这些日期时间值当前显示如下(例如):

Dec. 18, 2011, 11:59 p.m.

2011年12月18日11:59

I would like to display just the date part rather than both date and time.

我想只显示日期部分,而不是日期和时间。

This is what I have in my html page:

这是我在我的html页面中所拥有的:

<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function() {
        $('#certs-table').dataTable({
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "bProcessing": true,
                "bServerSide": true, 
                "sAjaxSource": "/cars/get_cars_list/",
                "iDisplayLength": 10,
                "aoColumnDefs": [
                        { "aTargets": [0], "bVisible": false, "bSearchable": false},
                        { 
                          "aTargets": [1], 
                           "fnRender": function ( oObj ) {
                                return '<a href=\"/cars/' + oObj.aData[0] + '/\">' + oObj.aData[1] + '</a>';
                            },
                          "bSearchable": true, 
                        },
                        { "aTargets": [2], "bSearchable": true},
                        { "aTargets": [3], "bSearchable": false, "sType": 'date'},
                ]
        });
} );
/* ]]> */
</script>

The date is is the 4th column, i.e., aTarget[3].

日期是第四列,即。,aTarget[3]。

How do I display just the date portion please? I only started using DataTables/JQuery yesterday, so would really appreciate an example. Thanks.

请问如何显示日期部分?我昨天才开始使用DataTables/JQuery,所以我真的很喜欢这个例子。谢谢。

3 个解决方案

#1


4  

I think that the best whay would be to convert data server side and just return the date format you want, but you could also

我认为最好的方法是转换数据服务器端,返回你想要的日期格式,但是你也可以。

 { "aTargets": [3], 
   "bSearchable": false, 
   "sType": 'date',
   "fnRender": function ( oObj ) {
              var javascriptDate = new Date(oObj.aData[0]);
              javascriptDate = javascriptDate.getDate()+"/"+javascriptDate.getMonth()+"/"+javascriptDate.getFullYear();
              return "<div class= date>"+javascriptDate+"<div>";
              }
 }

#2


5  

It's often best to return the UTC date as JSON string from the server and then to format it in the browser with the user's local format settings. I like to use moment.js to do the formatting. Example:

通常最好将UTC日期作为JSON字符串从服务器返回,然后在浏览器中以用户的本地格式设置将其格式化。我喜欢用瞬间。进行格式化。例子:

"aoColumnDefs": [
    {   //format the date for local time
        "aTargets" : [ 1, 5], //indexes of whatever columns you need to format
        "mRender": function ( data, type, full ) {
            if(data){
                var mDate = moment(data);
                return (mDate && mDate.isValid()) ? mDate.format("L LT") : "";
            }
            return "";
        }
    }
]

There are different strings you can return that will work with moment. Make sure you specify the offset (Z) as +0000 otherwise the date will be parsed as local time.

有不同的字符串,你可以返回,它会随着时间的变化。确保您指定的偏移量(Z)为+0000,否则日期将被解析为本地时间。

moment("2010-10-20 4:30"); // parsed as 4:30 local time
moment("2010-10-20 4:30 +0000"); // parsed as 4:30 UTC 

#3


2  

The previous responses are using legacy DataTables API. The syntax for versions 1.10+ is:

前面的响应是使用遗留的DataTables API。版本1.10+的语法如下:

"columnDefs": [
    {
        "targets": [6, 7],
        "type" : "date",
        "render": function (data) {
            if (data !== null) {
                var javascriptDate = new Date(data);
                javascriptDate = javascriptDate.getMonth() + 1 + "/" + javascriptDate.getDate() + "/" + javascriptDate.getFullYear();
                return javascriptDate;
            } else {
                return "";
            }
        }
    }
]   

#1


4  

I think that the best whay would be to convert data server side and just return the date format you want, but you could also

我认为最好的方法是转换数据服务器端,返回你想要的日期格式,但是你也可以。

 { "aTargets": [3], 
   "bSearchable": false, 
   "sType": 'date',
   "fnRender": function ( oObj ) {
              var javascriptDate = new Date(oObj.aData[0]);
              javascriptDate = javascriptDate.getDate()+"/"+javascriptDate.getMonth()+"/"+javascriptDate.getFullYear();
              return "<div class= date>"+javascriptDate+"<div>";
              }
 }

#2


5  

It's often best to return the UTC date as JSON string from the server and then to format it in the browser with the user's local format settings. I like to use moment.js to do the formatting. Example:

通常最好将UTC日期作为JSON字符串从服务器返回,然后在浏览器中以用户的本地格式设置将其格式化。我喜欢用瞬间。进行格式化。例子:

"aoColumnDefs": [
    {   //format the date for local time
        "aTargets" : [ 1, 5], //indexes of whatever columns you need to format
        "mRender": function ( data, type, full ) {
            if(data){
                var mDate = moment(data);
                return (mDate && mDate.isValid()) ? mDate.format("L LT") : "";
            }
            return "";
        }
    }
]

There are different strings you can return that will work with moment. Make sure you specify the offset (Z) as +0000 otherwise the date will be parsed as local time.

有不同的字符串,你可以返回,它会随着时间的变化。确保您指定的偏移量(Z)为+0000,否则日期将被解析为本地时间。

moment("2010-10-20 4:30"); // parsed as 4:30 local time
moment("2010-10-20 4:30 +0000"); // parsed as 4:30 UTC 

#3


2  

The previous responses are using legacy DataTables API. The syntax for versions 1.10+ is:

前面的响应是使用遗留的DataTables API。版本1.10+的语法如下:

"columnDefs": [
    {
        "targets": [6, 7],
        "type" : "date",
        "render": function (data) {
            if (data !== null) {
                var javascriptDate = new Date(data);
                javascriptDate = javascriptDate.getMonth() + 1 + "/" + javascriptDate.getDate() + "/" + javascriptDate.getFullYear();
                return javascriptDate;
            } else {
                return "";
            }
        }
    }
]