Date format JSON jqgrid

Question

I'm developing a web application in java. I'm filling a jqgrid with JSON data. The problem is that the column "birthdate" shows an incorrect format. In MySQL database the field is DATE type, but in the jqgrid it is shown as: "Dec 30, 1989". I need the following format: '1989-12-30'

My servlet code:

 protected void doPost(HttpServletRequest request,
        HttpServletResponse response) throws ServletException, IOException {

    String parameter = request.getParameter("parameter");
    String username = request.getParameter("username");
    int option = Integer.parseInt(request.getParameter("option"));

    DBConnection db = new DBConnection();
    StringBuilder sb = new StringBuilder();
    Connection con = (Connection) db.getCon();
    PreparedStatement ps = null;
    ResultSet rs = null;
    ArrayList<Customers> customerList = new ArrayList<Customers>();

    try {
        sb.append("{call SP_MSTCUSTOMERS_FIND(?,?,?)}");
        ps = con.prepareCall(sb.toString());
        ps.setString(1, parameter);
        ps.setString(2, username);
        ps.setInt(3, option);
        rs = ps.executeQuery();
        while (rs.next()) {
            Customers customer = new Customers();
            customer.setIdMstCustomers(rs.getInt("IDMSTCUSTOMERS"));
            customer.setFirstName(rs.getString("FIRST_NAME"));
            customer.setLastName(rs.getString("LAST_NAME"));
            customer.setBirthdate(rs.getDate("BIRTHDATE"));       
            customerList.add(customer);
        }
    } catch (SQLException e) {
        e.printStackTrace();
    }

    Gson gson = new Gson();
    JsonElement element = gson.toJsonTree(customerList, new TypeToken<List<Customers>>() {
    }.getType());

    JsonArray jsonArray = element.getAsJsonArray();
    response.setContentType("application/json");
    response.getWriter().print(jsonArray);
}

The jqgrid's code:

 $("#list").jqGrid({
    url: 'PopulateCustomersTable',
    postData: {
        parameter: function () {
            return $("#parameter").val();
        },
        username: function () {
            return $("#txtusrID").val();
        },
        option: function () {
            return $("input[name='srch']:checked").val(); //$('[name="srch"]').val();
        }
    },
    datatype: "json",
    mtype: 'POST',
    colNames: ['Id', 'First Name', 'Last Name', 'Birthdate'],
    colModel: [{
            name: 'IdMstCustomers',
            index: 'IdMstCustomers',
            width: 50,
            fixed: true,
            align: 'center'
        }, {
            name: 'FirstName',
            index: 'FirstName',
            width: 100,
            fixed: true,
            align: 'center',
            editable: true
        }, {
            name: 'LastName',
            index: 'LastName',
            width: 100,
            fixed: true,
            align: 'center',
            editable: true
        }, {
            name: 'Birthdate',
            index: 'Birthdate',
            width: 100,
            editable: true,                
        }],
    pager: '#pager',
    rowNum: 10,
    rowList: [10, 20, 30],
    sortname: 'FirstName',
    sortorder: 'desc',
    viewrecords: true,
    gridview: true,
    caption: 'Customers',
    jsonReader: {
        repeatitems: false
    },
    editurl: "CustomersServlet"
});
$('#list').trigger('reloadGrid');
$('#list').jqGrid('setGridWidth', '900'); 
jQuery("#list").jqGrid('navGrid', '#pager', {
    edit: true,
    add: false,
    del: false,
    search: true
});

The jqgrid data looks like this

My customers class

public Customers(int IdMstCustomers, String FirstName, String LastName, Date Birthdate) {
    this.setIdMstCustomers(IdMstCustomers);
    this.setFirstName(FirstName);
    this.setLastName(LastName);
    this.setBirthdate(Birthdate);
}

public Customers() {

}
private int IdMstCustomers;
private String FirstName;
private String LastName;
private Date Birthdate;

public void setIdMstCustomers(int IdMstCustomers) {
    this.IdMstCustomers = IdMstCustomers;
}

public void setFirstName(String FirstName) {
    this.FirstName = FirstName;
}

public void setLastName(String LastName) {
    this.LastName = LastName;
}

public void setBirthdate(Date Birthdate) {
    this.Birthdate = Birthdate;
}

public int getIdMstCustomers() {
    return IdMstCustomers;
}

public String getFirstName() {
    return FirstName;
}

public String getLastName() {
    return LastName;
}

public Date getBirthdate() {
    return Birthdate;
}

Answer 1

You can add a formatter to format the date value as per your required format:

{
    name: 'Birthdate',
    index: 'Birthdate',
    width: 100,
    editable: true,
    formatter: 'date', formatoptions: { srcformat: 'M, d, Y', newformat: 'Y-m-d'}
}

You can read more about it here: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter