set_col_date()

  • Parameters:
    • $col_name: column name
    • $srcformat: source date format, eg. “Y-m-d”
    • $newformat: new date form to be displayed, eg. “m/d/Y”
    • $datepicker_format: datepicker format, eg. “m/d/yy”
  • Description:
    •  Helper function to format date using PHP date format options (http://php.net/manual/en/function.date.php). MySql always stores date in either ‘YYYY-MM-DD’ or ‘YY-MM-DD’ format. However, we can still change the front-end date display format while conform to its date standards.
  • Remark:
    • In most cases, you don’t need to call this method because phpGrid automatically formats the data with corresponding data type including date.
    • Only use this method in order to display date format that is different from default date format.
    • To display time only, please use set_col_property instead.
  • Example:

Format date to “m/d/Y”, the Spanish date format. The example illustrates two different methods. You can use either or.

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
// srcFormat: MySql date format is "Y-m-d"
// newFormat: Display date format is "m/d/Y"
// datepicker: Datepicker date format is "yy-mm-dd"

// 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'
                                            })
                                        }"
)));

// 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));

// Display datetimepicker. Used when data is DATETIME type.
$dg -> set_col_datetime("myDateTime");

Change calendar datepicker locale

Using method 2, add the following in datepicker in dataInit in editoptions, replace ‘es’ (Spanish) with locale of your choice.

1
 $(el).datepicker( $.datepicker.regional[ 'es' ] )

With above included, the entire snippet would be

1
2
3
4
5
6
7
8
9
10
11
12
$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( $.datepicker.regional[ 'es' ] );
                                           $(el).datepicker({
                                               changeMonth: true,
                                               changeYear: true,
                                               dateFormat: 'm/d/yy'
                                           })
                                       }")));

Finally include script link to jQueryUI.

1
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>