How can I save and load values in timepicker if the value provided is in HH:mm:ss format instead of normal date format?

[Sanal]

I am trying to fix an issue on an old react application with jquery dependencies 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}
      />

I understand that the ValueCodes.Start mentioned above is linked with the type of the input filed. I did find the following set of codes that determine the type of that field in the corresponding datasource builder file.

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?

[Neli]

Hello Sanal,

The TimePicker value should be of date type while as far as I understand you need to use strings to set its value. Such a scenario is not supported. What I would suggest is using the JS getHours() and getMinutes() method to extract the time. You will also need to add custom logic in order to convert the strings to date and use it in the TimePicker. 

Regards,
Neli
Progress Telerik

[Sanal]

Thanks, but I figured it out in a different way. First I had to set the format correct in kendoTimePicker

$(`#${this.id}`).kendoTimePicker({
      interval: this.props.intervalMins,
      parseFormats: [
        'HH:mm:ss'
      ],
    });

Then I also had to add a parse method along with the type

fields[KnownLobPrefValueCodes.DayShiftEnd] = {

          type: 'date',

          parse(time: Date) {

return time? kendo.toString(time, 'HH:mm:ss') : time;

          }

        };

This made it work. I don't know how many formats I can include in 

parseFormats

[Nikolay]

Hi Sanal,

Thank you for the update and sharing your solution. I believe it will be halful to others facing the same scenario.

Regards,

Nikolay