In frappe.ui.Dialog I am not able to add ReadOnly Date and Time field

Hello,

I am trying to build a frappe.ui.Dialog. In this I want to show two fields.
Fist Field is of Type Date and other Field is of Type Time.

                {
                    label: __('Start Date'),
                    fieldname: 'start_date',                    
                    fieldtype: 'Data',
                    read_only: 1,
                    default: start_date
                },
                {
                    label: __(''),
                    fieldname: 'col_brk_005',
                    fieldtype: 'Column Break'
                },
                {
                    label: __('Start Time'),
                    fieldname: 'start_time',                    
                    fieldtype: 'Data',
                    read_only: 1,
                    default: start_time
                }

But getting error as below

function btn_finish(frm, dt, dn)
script_manager.js:24:12
Uncaught (in promise) TypeError: this.datepicker is undefined
    set_input time.js:46
    Class.extend/proto[name]</< class.js:53
    make field_group.js:33
    each jQuery
    make field_group.js:25
    Class.extend/proto[name]</< class.js:53
    make dialog.js:53
    Dialog dialog.js:18
    btn_finish my_route_card__js:721
    _handler script_manager.js:22
    runner script_manager.js:100
    trigger script_manager.js:118
    promise callback*frappe.run_serially/< dom.js:265
    run_serially dom.js:263
    trigger script_manager.js:132
    onclick button.js:25
    input button.js:15
    jQuery 8
    make_input button.js:14
    Class.extend/proto[name]</< class.js:53
    make_input base_input.js:60
    refresh_input base_input.js:87
    refresh base_control.js:102
    attach_doc_and_docfields layout.js:338
    refresh layout.js:237
    render grid_row_form.js:28
    show_form grid_row.js:949
    toggle_view grid_row.js:935
    open_form_button grid_row.js:245
    jQuery 8
    add_open_form_button grid_row.js:244
    render_row grid_row.js:212
    make grid_row.js:38
    GridRow grid_row.js:16
    render_result_rows grid.js:373
    refresh grid.js:324
    refresh_input table.js:112
    refresh base_control.js:102
    attach_doc_and_docfields layout.js:338
    refresh layout.js:237
    refresh_fields form.js:549
    render_form form.js:505
    promise callback*frappe.run_serially/< dom.js:265
    run_serially dom.js:263
    render_form form.js:497
    initialize_new_doc form.js:466
    promise callback*initialize_new_doc form.js:463
    trigger_onload form.js:441
    refresh form.js:338
    render formview.js:108
    fetch_and_render formview.js:92
    callback model.js:216
    callback request.js:83
time.js:46:9
Source map error: Error: unsupported protocol for sourcemap request webpack://Quill/node_modules/quill-delta/dist/Delta.js.map
Resource URL: webpack://Quill/./node_modules/quill-delta/dist/Delta.js?
Source Map URL: Delta.js.map
Source map error: Error: unsupported protocol for sourcemap request webpack://Quill/node_modules/quill-delta/dist/AttributeMap.js.map
Resource URL: webpack://Quill/./node_modules/quill-delta/dist/AttributeMap.js?
Source Map URL: AttributeMap.js.map
Source map error: Error: unsupported protocol for sourcemap request webpack://Quill/node_modules/quill-delta/dist/Op.js.map
Resource URL: webpack://Quill/./node_modules/quill-delta/dist/Op.js?
Source Map URL: Op.js.map
Source map error: Error: unsupported protocol for sourcemap request webpack://Quill/node_modules/quill-delta/dist/Iterator.js.map
Resource URL: webpack://Quill/./node_modules/quill-delta/dist/Iterator.js?
Source Map URL: Iterator.js.map
Source map error: Error: request failed with status 404
Resource URL: http://localhost:8004/assets/js/libs.min.js?ver=1658757213.0
Source Map URL: socket.io.slim.js.map

If I remove read_only attribute it works.

What must be the problem and how to solve it?

TIA

Yogi Yang