iT邦幫忙

0

使用jQuery DataTable套件,日期時間的資料要如何只顯示日期就好?

  • 分享至 

  • xImage

練習使用jQuery DataTable套件,資料庫內容是用北風資料庫

目前是已經成功將資料取出且呈現在datatable了,但日期格式卻想不出要怎麼處理 @@

已經有試過ToString("yyyy-MM-dd")、format日期格式,但還是會把時間的部分呈現在畫面上,請教各位要怎麼修改Code的部分,才只會顯示日期就好?

謝謝

畫面

程式碼

Models

public class OrdersList
    {
        public List<Orders> OdList(string OrderID)
        {
            List<Orders> itemS = new List<Orders>();

            string sql = string.Format(@"Select * From Orders", OrderID);

            SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings[""].ConnectionString);

            try
            {
                conn.Open();
                SqlDataAdapter adpt = new SqlDataAdapter();
                using (SqlCommand cmd = new SqlCommand())
                {
                    DataTable ds = new DataTable();
                    cmd.Connection = conn;
                    cmd.CommandText = sql;
                    adpt.SelectCommand = cmd;
                    adpt.Fill(ds);

                    foreach (DataRow row in ds.Rows)
                    {
                        Orders item = new Orders();
                        
        item.OrderID = Int32.Parse(row["OrderID"].ToString());
        item.CustomerID = row["CustomerID"].ToString();
        item.EmployeeID = Int32.Parse(row["EmployeeID"].ToString());
        item.OrderDate = DateTime.Parse(row["OrderDate"].ToString());
        item.RequiredDate = DateTime.Parse(row["RequiredDate"].ToString());
        item.ShippedDate = DateTime.Parse(row["ShippedDate"].ToString());
        item.ShipVia = Int32.Parse(row["ShipVia"].ToString());
        item.Freight = decimal.Parse(row["Freight"].ToString());
        item.ShipName = row["ShipName"].ToString();
        item.ShipAddress = row["ShipAddress"].ToString();
        item.ShipCity = row["ShipCity"].ToString();
        item.ShipRegion = row["ShipRegion"].ToString();
        item.ShipPostalCode = row["ShipPostalCode"].ToString();
        item.ShipCountry = row["ShipCountry"].ToString();

                        itemS.Add(item);
                    }
                }
            }
            catch (Exception ex)
            {
                var Error = ex.Message;
                Console.WriteLine(ex.ToString());
            }
            finally
            {
                conn.Close();
                conn.Dispose();
            }

            return itemS;
        }
    }

Controller

public ActionResult OrdersList()
        {
           
            return View();
        }
        [HttpPost]
        public string GetOrders(string OrderID)
        {
            using (NorthwindEntities db = new NorthwindEntities())
            {
                OrdersList con = new OrdersList();
                var result = con.OdList(OrderID);
                
                return JsonConvert.SerializeObject(result);
            }
        }

Views
View的部分就是使用jquery + ajax接後端資料

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
japhenchen
iT邦超人 1 級 ‧ 2022-12-11 20:58:46

加這個prototype到你的javascript的尾端

Date.prototype.Format = function (fmt) { //author: meizz 
    var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "h+": this.getHours(), //小時 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        "S": this.getMilliseconds() //毫秒 
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}

然後你就能在你的jQuery或pureJavascript裡使用這個新函數

console.log(indate.Format("yyyy-MM-dd"));
$("#yourinput").val(indate.Format("yyyy-MM-dd"));
0
chan15
iT邦新手 2 級 ‧ 2022-12-12 11:07:51

我不是很確定你想在 source 方還是想在 render 方解這件事,render 方的話可以使用他的 render 功能去 manipulate 結果

https://datatables.net/reference/option/columns.render

0
JamesDoge
iT邦高手 1 級 ‧ 2023-02-15 06:17:23

在 DataTable 中,你可以使用 render 方法自訂輸出格式,將時間部分去除,只留下日期。在 columns 定義欄位的時候,可以設定使用 render 方法將日期格式化。例如:

$('#table').DataTable({
  columns: [
    { data: 'OrderID', title: 'Order ID' },
    { data: 'CustomerID', title: 'Customer ID' },
    { data: 'OrderDate', title: 'Order Date',
      render: function (data) {
        return new Date(data).toISOString().slice(0,10);
      }
    },
    // 其他欄位
  ]
});

在上面的程式碼中,我們設定了一個 render 方法,將日期轉成 ISO 字串,然後只留下前 10 個字元,也就是只留下日期部分。

你可以在需要格式化日期的欄位中,套用這樣的方法即可。

我要發表回答

立即登入回答