如何为Kendo Datetimepicker设置最小最大可选时间?

时间:2017-12-14 17:20:42

标签: javascript jquery kendo-ui kendo-grid kendo-asp.net-mvc

我尝试使用Kendo Datetimepicker的配置来设置从09:00开始的最短时间。

如下所示:

import { Action, ActionReducerMap } from '@ngrx/store';

export enum AnnoSetsTypes {
  ADD_MANY = '[AnnoSets] Add Many',
  RESET = '[AnnoSets] Reset',
}

export class AddMany implements Action {
  readonly type = AnnoSetsTypes.ADD_MANY;

  constructor(public annoSets: any[]) { }
}

export class Reset implements Action {
  readonly type = AnnoSetsTypes.RESET;
}

export type AnnoSetsAction = AddMany | Reset;

export interface IAnnoSetsState {
  annoSets: any[];
}

export function annoSetsReducer(
  state: IAnnoSetsState = { annoSets: [] },
  action: AnnoSetsAction
): IAnnoSetsState {
  switch (action.type) {
    case AnnoSetsTypes.ADD_MANY:
      return { annoSets: [...action.annoSets] };
    case AnnoSetsTypes.RESET:
      return { annoSets: [] };
    default:
      return state;
  }
}

export interface State {
  annoSets: IAnnoSetsState;
}

export const reducers: ActionReducerMap<State> = { // <-- COMPILE ERROR HERE
  annoSets: annoSetsReducer,
};

但我只允许设置2017-01-01的时间。不适用于2017-01-02或任何其他日期。

我希望这个Kendo Datetimepicker的上午9:00到晚上11:00之间的范围。

请帮忙。

感谢。

更新 这个问题已经解决了:我引用了Setting DateTimePicker to show specific time range e.g. working hours only

1 个答案:

答案 0 :(得分:1)

您可以按如下方式设置minmax

<input id="datetimepicker" />
<script>
$("#datetimepicker").kendoDateTimePicker({
    value: new Date(2011, 0, 1, 9, 0, 0),
    min: new Date(2011, 0, 1, 9, 0, 0),
    max: new Date(2011, 0, 1, 23, 0, 0)
});
</script>

请注意,您应在valuemin范围内提供max

有关详细信息,请参阅上面的嵌入式链接。

感谢@Erik,这是一个demo fiddle

<强>更新
如果你想要的是在多个天内限制9-23的时间,那么有一个很好的答案here可以演示它here