I am trying to fix an issue on an old react application and I am not familiar with the approach used here. We are using the following dependencies(some important ones mentioned). Node version is 14.x

"dependencies": {
"@progress/kendo-ui": "^2021.3.1207",
"@types/node": "^12.20.15",
"@types/react": "^17.0.11",
"moment": "^2.29.4",
"react": "^17.0.2",
.
.
.
}

  "devDependencies": {
    "@types/jquery": "^3.5.5",
.
.
.
  }

Right now we are using the below timepicker and this passes in a datetime value on save, in this format 2024-03-14T09:00:00.000Z. But I want to change this to pass in value as a time in this format HH:mm:ss .

      <input
        id={this.id}
        name={this.props.validationName}
        data-role="timepicker"
        data-bind={`value: ${ValueCodes.Start}`}
        data-format="h:mm tt"
        required={true}
        disabled={true}
      />

export class ValueCodes {
  public static readonly Start = 'sTRT_TIME';
.
.
.
}

protected getDataSourceOptions() {
    const fields: { [key: string]: { type: string } } = {};
    switch (this.categoryCode) {
      case 'INIT':
        fields[ValueCodes.Start] = { type: 'date' };
.
.
.
        break;
.
.
.
      default:
        break;
    }
    return {
      fields: fields,
      transportOptions: { baseUrl: `${X.getApiUrl()}value/${this.categoryCode}` }
    };
  }
}

On changing the 'type' from 'date' to 'time' here, fields[ValueCodes.Start] = { type: 'date' }; I encountered some errors. I was only able to save the value in my desired format, if I disable validation. Aprart from that the timepicker now will not load the datetime or time value fetched from the backend because of the 'type' change from 'date' to 'time'.

Is there a specific way in kendo that I can try to overcome this?

Hi Support,

I just wondering on how to change the date format on Scheduler components (look picture below, those start and end section). At the moment my date format is coming up as month/day/year, but what i want is day/month/year.

This is the KendoUI React Scheduler i am using on my code. 

I tried to look at  your api online but still couldn't get the solutions. Please give me advice.

Thanks

John

Hi , Here is the code we are using for datetimepicker , kindly have a check , 

Hello,

I'm currently not using the KendoReact - DateTimePicker because I miss the ability to apply a selected Date/Time without

having to press "set". Maybe with an onChange event or similar.

Does anyone have a best practice or workaround to solve this issue?

Thanks in advance and Kind regards ~

Hi,

Please see this example https://codesandbox.io/s/thirsty-bohr-2s8dmm?file=/app/main.jsx. There is a very simple DatePicker and a very simple Grid in the page. The Grid has 1000 rows. When clicking the DatePicker button, it take 1 - 2 seconds to show the calendar dropdown, which  significantly slower then normal.

Thanks,

Jie

Hi ,

Today is 3/08/2023. I tried to create 2  DateTimePicker  controls  as code below 

The Effective Date control show :   while the Today Date show  

Can you pls advise me why the value of Effective Date changed ? 

Thanks,
Thao Phan

So it seems no matter what I do, I can't have a DateTimePicker default to show={true} in a Dialog. I keep getting a Maximum Update error in the popup. All I'm trying to render is this;

return (
     <Dialog
      title="Select Time Range"
      onClose={props.toggleDialog}
      width={900}
      height={700}
    >
      <DateTimePicker
        show={true}
      ></DateTimePicker>    
    </Dialog>
  );

Hi. I'm trying to changing milliseconds part.

But, it's perfect only to display milliseconds part.

In other words, milliseconds part cannot be changed using mouse wheel or keyboard.

In addtion. cannot make milliseconds part be focused.

(date,hour,minute and second are working)

the format props of DateTimepicker is "yyyy-MM-dd HH:mm:ss .SSS"

the defaultValue and value props also is correct. Because displaying milliseconds is perfect.

@progress/kend-react-dateinputs: ^5.7.0

Pease. let me resolve this problem.

thanks.

Just so you know I'm currently using version 3 of kendo react

I'm having an issue where I have a form, showing in a dialog box. When the screen size is smaller, and i click the date time picker on my form, the date time picker crops out of the page, so I can't see the bottom of the date time picker. I was thinking to use a class to reposition the datetime picker, but I'm unable to connect my KendoDateTimePicker popupcClass with the CSS class that I added. When i check the popup's class my css class isn't there. What's a good way to make it that my datetimepicker doesn't crop out of my page?

Hello, I have a problem when using DatePicker in the dialog. In the small height screen devices, the DatePicker does not show fully. Please help me if you know how to fix it, thanks!