Syncfusion日期时间选择器,我想设置默认时间。

huangapple go评论66阅读模式
英文:

syncfusion datetimepicker I want to set default time

问题

你好,我正在使用此页面上的示例:

syncfusion 示例

我的问题是,我想设置默认时间,如开始时间:9:00:00 和结束时间:9:30:00。

此外,客户可以自由设置时间...

你能帮助我吗T.T...

而且我想拖动弹出窗口...

我尝试了以下代码,但它不起作用:

  1. function OnPopupOpen(args) {
  2. ej.base.addClass([args.element], ['e-draggable']);
  3. }
英文:

hello I'm using the example on this page

syncfusion example

and my problum is that I want to set the default time
like start time : 9:00:00 and end time : 9:30:00

also, client can set time freely...

could you help me T.T ...

and also I want to drag the popup...

I tried

  1. function OnPopupOpen(args) {
  2. ej.base.addClass([args.element], ['e-draggable']);

this code but It doesn't work..

答案1

得分: 1

我没有找到弹出框可移动的配置。但可以观察到弹出框的ID是“schedule_dialog_wrapper”。
对于第一个问题,您可以尝试修改日期选择器部分如下:

  1. if (!startElement.classList.contains('e-datetimepicker')) {
  2. new ej.calendars.DateTimePicker({ value: new Date(startElement.value) || new Date(new Date(startElement.value).toISOString().split("T")[0] + "T09:00:00+08:00") }, startElement);
  3. }
  4. var endElement = args.element.querySelector('#EndTime');
  5. if (!endElement.classList.contains('e-datetimepicker')) {
  6. new ej.calendars.DateTimePicker({ value: new Date(endElement.value) || new Date(new Date(endElement.value).toISOString().split("T")[0] + "T09:30:00+08:00") }, endElement);
  7. }

它将默认在弹出框中显示9:00-9:30(将“+03:00”更改为您的时区)。

修改说明:value: new Date(startElement.value) || xxx 这句话的意思是,如果startelement不为空,则选择前者,否则选择后者。

英文:

I didn't find the configuration of popup movable. But it can be observed that the popup id is "schedule_dialog_wrapper".
For the 1st question, you can try modify the datepicker part like below

  1. if (!startElement.classList.contains('e-datetimepicker')) {
  2. new ej.calendars.DateTimePicker({ value: new Date(startElement.value) || new Date(new Date(startElement.value).toISOString().split("T")[0] + "T09:00:00+08:00") }, startElement);
  3. }
  4. var endElement = args.element.querySelector('#EndTime');
  5. if (!endElement.classList.contains('e-datetimepicker')) {
  6. new ej.calendars.DateTimePicker({ value: new Date(endElement.value) || new Date(new Date(endElement.value).toISOString().split("T")[0] + "T09:30:00+08:00") }, endElement);
  7. }

It will get 9:00-9:30 by default in popup.(change the "+03:00" to your timezone)

Modify explaination:value: new Date(startElement.value) || xxx This sentence means if the startelement is not empty choose the front one, or will choose the latter.

答案2

得分: 1

你可以使用以下代码在编辑器模板中设置新事件弹出窗口的默认时间。

  1. function onPopupOpen(args) {
  2. if (args.type === 'Editor') {
  3. if (args.target.classList.contains('e-work-cells')) {
  4. args.data.StartTime = new Date(args.data.StartTime.setHours(9, 0, 0));
  5. args.data.EndTime = new Date(args.data.EndTime.setHours(9, 30, 0));
  6. }
  7. var startElement = args.element.querySelector('#StartTime');
  8. if (!startElement.classList.contains('e-datetimepicker')) {
  9. new ej.calendars.DateTimePicker({ value: args.data.StartTime || new Date() }, startElement);
  10. }
  11. var endElement = args.element.querySelector('#EndTime');
  12. if (!endElement.classList.contains('e-datetimepicker')) {
  13. new ej.calendars.DateTimePicker({ value: args.data.EndTime || new Date() }, endElement);
  14. }
  15. }
  16. }

关于如何拖动弹出窗口,请参考以下共享的用户指南。

UG: https://ej2.syncfusion.com/aspnetcore/documentation/common/drag-and-drop#initializing-custom-draggable-element

  1. function onPopupOpen(args) {
  2. var dragElement = args.element;
  3. var draggable = new ej.base.Draggable(dragElement, { clone: false });
  4. }
英文:

You can set the default time for the new event popup in the editor template by using the below code.

  1. function onPopupOpen(args) {
  2. if (args.type === 'Editor') {
  3. if(args.target.classList.contains('e-work-cells')) {
  4. args.data.StartTime = new Date(args.data.StartTime.setHours(9, 0, 0));
  5. args.data.EndTime = new Date(args.data.EndTime.setHours(9, 30, 0));
  6. }
  7. var startElement = args.element.querySelector('#StartTime');
  8. if (!startElement.classList.contains('e-datetimepicker')) {
  9. new ej.calendars.DateTimePicker({ value: args.data.StartTime || new Date() }, startElement);
  10. }
  11. var endElement = args.element.querySelector('#EndTime');
  12. if (!endElement.classList.contains('e-datetimepicker')) {
  13. new ej.calendars.DateTimePicker({ value: args.data.EndTime || new Date() }, endElement);
  14. }
  15. }

Refer to the below shared UG to know about how to drag the popup.

UG: https://ej2.syncfusion.com/aspnetcore/documentation/common/drag-and-drop#initializing-custom-draggable-element

  1. function onPopupOpen(args) {
  2. var dragElement = args.element;
  3. var draggable = new ej.base.Draggable(dragElement, { clone: false });}

答案3

得分: 0

我用这段代码创建了它:

  1. var titleTextElement = args.element.querySelector('.e-title-text');
  2. var startElement = args.element.querySelector('#START_DATE');
  3. var endElement = args.element.querySelector('#END_DATE');
  4. if (titleTextElement.innerText === 'Edit Event') {
  5. new ej.calendars.DateTimePicker({ value: new Date(startElement.value), format: "yyyy-MM-dd HH:mm:ss" }, startElement);
  6. new ej.calendars.DateTimePicker({ value: new Date(endElement.value), format: "yyyy-MM-dd HH:mm:ss" }, endElement);
  7. }
  8. else{
  9. var initialDate = new Date(startElement.value);
  10. initialDate.setHours(9, 0, 0);
  11. new ej.calendars.DateTimePicker({ value: initialDate, format: "yyyy-MM-dd HH:mm:ss" }, startElement);
  12. initialDate = new Date(endElement.value);
  13. initialDate.setHours(9, 30, 0);
  14. new ej.calendars.DateTimePicker({ value: initialDate, format: "yyyy-MM-dd HH:mm:ss" }, endElement);
  15. }
英文:

I made it with this code

  1. var titleTextElement = args.element.querySelector('.e-title-text');
  2. var startElement = args.element.querySelector('#START_DATE');
  3. var endElement = args.element.querySelector('#END_DATE');
  4. if (titleTextElement.innerText === 'Edit Event') {
  5. new ej.calendars.DateTimePicker({ value: new Date(startElement.value), format: "yyyy-MM-dd HH:mm:ss" }, startElement);
  6. new ej.calendars.DateTimePicker({ value: new Date(endElement.value), format: "yyyy-MM-dd HH:mm:ss" }, endElement);
  7. }
  8. else{
  9. var initialDate = new Date(startElement.value);
  10. initialDate.setHours(9, 0, 0);
  11. new ej.calendars.DateTimePicker({ value: initialDate, format: "yyyy-MM-dd HH:mm:ss" }, startElement);
  12. initialDate = new Date(endElement.value);
  13. initialDate.setHours(9, 30, 0);
  14. new ej.calendars.DateTimePicker({ value: initialDate, format: "yyyy-MM-dd HH:mm:ss" }, endElement);
  15. }

huangapple
  • 本文由 发表于 2023年5月30日 13:08:24
  • 转载请务必保留本文链接:https://go.coder-hub.com/76361748.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定