CODEWITHSUNDEEP
javascriptjqueryjquery-pluginscrudjquery-jtable
Jenish Rabadiya
Jenish Rabadiya

Reputation: 6766

how to customize jquery-jtable create dialog box

I am creating simple demo CRUD application using jtable jable.org

Jtable contains only two data columns

StartTime and EndTime

I can specify type field as date if I want to show Date-Picker in create modal window, but I don't have any idea how to show datetimepicker in the create modal dialog box.

Can I customize the create modal dialog box in jtable js.

$('#MaintenanceTime').jtable({
    jqueryuiTheme: true,
    paging: true,
    pageSize: 10,
    title: 'The Roles are as follows:-',
    messages: {
        loadingMessage: 'Fetching Data from Server',
        addNewRecord: 'Add New MaintenanceTime',
    },
    actions: {

        listAction: '@Url.Action("ListMaintenanceTime")',
        updateAction: '@Url.Action("UpdateMaintenanceTime")',
        deleteAction: '@Url.Action("DeleteMaintenanceTime")',
        createAction: '@Url.Action("AddMaintenanceTime")'

    },
    fields: {
        ATMaintenanceID: {
            key: true,
            title: 'Id',
            create: false,
            edit: false,
            list: false
        },
        StartDate: {
            title: 'Start Time'
            //type: 'datetime',
            //displayFormat: 'dd.mm.yy',
        },
        EndDate: {
            title: 'End Time'
            //type: 'date',
            //displayFormat: 'dd.mm.yy',
        },

    }
});

Thanks for reviewing my question.

Upvotes: 0

Views: 1610

Answers (1)

Nicolas R
Nicolas R

Reputation: 14609

If you want to use a datetime picker (not only date) in the jQuery's jTable plugin for an input in your CRUD actions, there is not dedicated type in the parameters (jtable doc):

password / date / textarea / radiobutton / checkbox / hidden

Because the date format allows only jQuery Datepicker date formats.

A GitHub user has made the following commit to implement the dateTime type: https://github.com/gbisheimer/jtable/commit/e40d9c4bd9c65adb56b43a9c233f65c9bc7a5cb9

You can start from his work to implement your part. It uses the timePicker from Trent Richardson (can be found on GitHub also, here), but as far as I looked, the implementation of G. Bisheimer may not be up to date (timePicker not up to date, latest jTable compatibility?)

Upvotes: 1

Related Questions