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

[Sanal]

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}
      />

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?

[Konstantin Dikov]

Hi Sanal,

The DateInput components work only with JavaScript Date object, so if you want to load and save the values in different format, you need to parse the values to and from Date object before setting them in the picker and when you need to save/use them.

 

Regards,
Konstantin Dikov
Progress Telerik

[Sanal]

I tried that already, but for some reason its not working. When the type is set to 'date', even if I modify the format like below, on both the console, I am getting the same value Eg-: Thu Mar 14 2024 03:00:00 GMT+0530 (India Standard Time) .

If I change the type to 'time' and disable the validation, the second console will print the correct format and I am able to pass it to backend. But I get issues like, blank value in the timepicker filed and also need to disable validation.

public static onSave(f: iForm, o: kendo.data.ObservableObject) {
    const StartTime = moment(o.get(ValueCodes.Start)).format('HH:mm:ss');
    console.log(o.get(ValueCodes.Start));
    o.set(ValueCodes.Start, StartTime );
    console.log(o.get(ValueCodes.Start));
  }

[Konstantin Dikov]

Hi Sanal,

You are setting a string value returned by the moment JS "format" method and as I have mentioned, the TimePicker works only with JavaScript Date objects. The value that is set to the TimePicker must always be a Date object.

One thing that you can try is to use the parameterMap function to convert the Date objects to the format that you want:

• https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/transport.parametermap

[Sanal]

 I figured it out. 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

[Konstantin Dikov]

Hi Sanal,

You can add as many formats as you want in the parseFormats array, but you should have in mind that the order is relevant and the first formats must be the ones that are more strict:

• https://docs.telerik.com/kendo-ui/api/javascript/ui/timepicker/configuration/parseformats