jQuery UI Widgets Forums Angular jqxScheduler – Get datetime and format on Angular

This topic contains 7 replies, has 2 voices, and was last updated by  Hristo 1 week, 3 days ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author

  • mdaumas
    Participant

    Hello!

    I want to get the datetime value setted on the scheduler and format it using the formats setted on the localization. I found that solution:

    var date = $("#jqxWidget").jqxDateTimeInput('getDate');
    var formattedDate = $.jqx.dataFormat.formatdate(date, 'd');

    but that was in JQuery and I want to know if it is possible to do the same on Angular.

    Best regards!!


    Hristo
    Participant

    Hello mdaumas,

    You could achieve it in the same way just without the $” object.
    Please, take a look at this example.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com


    mdaumas
    Participant

    Thanks, it works!

    Now, how do can I set in the localization object to use the standard 24h time format?


    Hristo
    Participant

    Hello mdaumas,

    If you mean the jqxDateTimeInput then you need to use the formatString property to set it as you wish.
    About the jqxScheduler, I would like to suggest you look at this JavaScript demo where you could easily check the localization object.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com


    mdaumas
    Participant

    Unfortunately the solution that you provide me doesn’t helped.

    What I actually want is to set the time format used by my jqxScheduler to the 24hr format, therefore removing the ‘AM’ and ‘PM’ from the new appointment dialog. Is that possible?


    Hristo
    Participant

    Hello mdaumas,

    I understand your point of view.
    You need to customize the jqxDateTimeInput in the dialog.
    For this purpose, it will be better if you make a combination between the previous demo and the Edit Dialogdemo.
    Please, try this approach below in the editDialogCreate callback and also, in the editOpenDialog callback for already existed dialog:

    setTimeout(() => {
    	fields.from.jqxDateTimeInput({ formatString: "dd/MM/yyyy HH:mm" });
    	fields.to.jqxDateTimeInput({ formatString: "dd/MM/yyyy HH:mm" });
    });

    I hope this will help.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com


    mdaumas
    Participant

    Hi Hristo

    The solution you provided me worked, but I got the error ‘ERROR TypeError: fields is undefined’.

    Here is my code.

    app.component.ts

    import { jqxSchedulerComponent } from 'jqwidgets-ng/jqxscheduler';
    
    import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
    
    import { ScheduleService } from 'src/services/schedule.service';
    import { DatePipe } from "@angular/common";
    
    @Component({
      selector: 'app-root',  
      templateUrl: './app.component.html',
      providers: [DatePipe]
    })
    export class AppComponent implements AfterViewInit, OnInit {
      @ViewChild('scheduler', {static: false}) myScheduler: jqxSchedulerComponent;
    
      source: any = {
        dataType: 'array',
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'startDate', type: 'date', format: 'yyyy/MM/dd HH:mm' },
          { name: 'endDate', type: 'date', format: 'yyyy/MM/dd HH:mm' },
          { name: 'recurrenceRule', type: 'string' }
        ],
        id: 'id',
        localData: []
      };
      appointmentDataFields: any = {
        from: "startDate",
        to: "endDate",
        id: "id",
        description: "description",
        subject: "subject", 
        allDay: "allDay",
        recurrencePattern: 'recurrenceRule'
      };
      resources: any = {
        colorScheme: "scheme01",
        dataField: "calendar",
        source: new jqx.dataAdapter(this.source)
      };
      views: any[] = [
        { type: 'dayView', timeRuler: { formatString: 'HH:mm' } },
        { type: 'weekView', timeRuler: { formatString: 'HH:mm '}},
        { type: 'monthView' },
        { type: 'agendaView' }
      ]; 
      dataAdapter: any;
      date: any = new jqx.date(new Date());
    
      localization = {
        '/' : '/',
        ':' : ':',
        firstDay: 1,
        days: {
          names: [ 'Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado' ],
          namesAbbr: [ 'Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab' ],
          namesShort: [ 'D', 'S', 'T', 'Q', 'Q', 'S', 'S' ]
        },
        months: {
          names: [ 'Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro' ],
          namesAbbr: [ 'Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez' ]
        },
        twoDigitYearMax: 2029,
        patterns: {
          d: 'd/M/yyyy',      
          D: 'dddd, MMMM dd, yyyy',
          t: 'HH:mm tt',
          T: 'HH:mm:ss tt',
          f: 'dddd, MMMM dd, yyyy HH:mm tt',
          F: 'dddd, MMMM dd, yyyy HH:mm:ss tt',
          M: 'MMMM dd',
          Y: 'yyyy MMMM',
          S: 'yyyy\u0027-\u0027MM\u0027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss',
          ISO: 'yyyy/MM/dd HH:mm',            
        }
      }
    
      constructor(private scheduleService: ScheduleService,
                  private datePipe: DatePipe) { }
    
      ngOnInit(): void { }
    
      ngAfterViewInit(): void {    
        this.getSchedules();
      }  
    
      getSchedules(){
        this.scheduleService.getSchedules().subscribe((res: any[]) => {
          this.source.localData = res;
          this.dataAdapter = new jqx.dataAdapter(this.source);
        });
      }  
    
      AppointmentAdd(event: any){    
        let scheduleData = event.args.appointment.originalData;
        
        var data = {
          id: scheduleData.id,
          description: scheduleData.description,
          subject: scheduleData.subject,      
          startDate: this.datePipe.transform(scheduleData.startDate, 'yyyy/MM/dd HH:mm'),
          endDate: this.datePipe.transform(scheduleData.endDate, 'yyyy/MM/dd HH:mm'),
          recurrenceRule: scheduleData.recurrenceRule == null ? '' : scheduleData.recurrenceRule.toString()      
        }    
    
        this.scheduleService.saveSchedule(data).subscribe(
          res => {
            console.log(res);
          },
          err => {
            console.error(err);
          }
        );
      }
    
      editDialogCreate = (dialog, fields, editAppointment) => {
        console.log('fields', fields);
        setTimeout(() => {
         fields.from.jqxDateTimeInput({ formatString: "dd/MM/yyyy HH:mm" });
         fields.to.jqxDateTimeInput({ formatString: "dd/MM/yyyy HH:mm" });
        });
      }
    
      editDialogOpen = (dialog, fields, editAppointment) => {
        console.log('fields', fields);
        setTimeout(() => {
          fields.from.jqxDateTimeInput({ formatString: "dd/MM/yyyy HH:mm" });
          fields.to.jqxDateTimeInput({ formatString: "dd/MM/yyyy HH:mm" });
         });
      }  
    }

    app.component.html

    <jqxScheduler #scheduler
                  (onAppointmentAdd)="AppointmentAdd($event)" 
                  [editDialogCreate]="editDialogCreate"
                  [editDialogOpen]="editDialogOpen"              
                  [localization]="localization"
                  [date]="date" 
                  [width]="800" 
                  [height]="600" 
                  [source]="dataAdapter" 
                  [showLegend]="true" 
                  [view]="'monthView'" 
                  [appointmentDataFields]="appointmentDataFields"
                  [resources]="resources" 
                  [views]="views">
    </jqxScheduler>

    Hristo
    Participant

    Hello mdaumas,

    I do not have details about your service and I try to reproduce your case in a similar scenario.
    Please, take a look at this example:
    https://stackblitz.com/edit/github-cxwest?file=src/app/app.component.ts
    But without success could you provide us with more details?
    If it possible for you to edit the example and to provide steps to reproduce it, it will be better.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.