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

Complete Date Format Demo (Updated)

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!

Note
Starting version 7.2.8, for MySQL, the pickers for the Date, Time and DateTime are automatically used respectively based on the datbase field type. This is for MySQL database only. Users no longer need to specify the date type with set_col_format.

Date Picker (MySQL Date)

Datetime Picker (MySQL Datetime)

Time Picker (MySQL Time)

See Live demo!