877-GRID-666 24/7 online support 604, Tower A, New Trade Plaza, N.T., Hong Kong

Complete Date Format Demo

The example demonstrates date column formatting using functions set_col_date, set_col_datetime, set_col_property(…formatter”=>”date”,…). If you have trouble with date format, most likely you will find answer here. Also pay attention to inline comments.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$dg = new C_DataGrid("SELECT * FROM orders", "orderNumber", "orders");

// Method 1: change date display and datepicker display (used for edit) to Spanish date
$dg -> set_col_date("orderDate", "Y-m-d", "m/d/Y", "m/d/yy");

// Method 2: change date display and datepicker display (used for edit) to Spanish date
$dg -> set_col_property("requiredDate",
                             array("formatter"=>"date",
                                   "formatoptions"=>array("srcformat"=>"Y-m-d","newformat"=>"m/d/Y"),
                                   "editoptions"=>array(
                                        "dataInit"=>"function(el) {
                                            $(el).datepicker({
                                                changeMonth: true,
                                                changeYear: true,
                                                dateFormat: 'm/d/yy'
                                            })
                                        }"
)));

// Method 3: Display using jQuery Datetimepicker extension replacing the built-in datepicker plus option time picker
$dg -> set_col_datetime("contractDateTime", "Y-m-d H:i", "m/d/Y H:i", "m/d/Y H:i");

// Display time only. No date. It cannot be edited, so we also made it hidden on the edit form.
$dg -> set_col_property("shippedDate",
            array("formatter"=>"date",
                "formatoptions"=>array("srcformat"=>"ISO8601Short","newformat"=>"g:i A"),
                'editable'=>false,'hidedlg'=>true));


$dg->enable_edit();
$dg -> display();

See Live demo!