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.

One can “fine tune” the jQuery datepicker properties like year range and min and max date. The jQuery UI Datepicker is a highly configurable plugin that one can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily.

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
31
32
$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',
                                                yearRange: '-50:+50', // set range of selectable years back and future 50 yrs
                                                minDate: '+100d'      // minimum selectable date is 100 days into future
                                            })
                                        }"
)));

// 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!

CLOSE
CLOSE