Using a Date Field in a Ts

Using a date field in a ts?

You don't necessarily need to create new types of objects from scratch; you can always coerce to other classes, including ts as you need to. zoo or xts are arguably to most useful and intuitive but there are others. Here is your example, cast as a zoo object, which we then coerce to class ts for use in acf().

## create the data
x <- as.Date("2008-01-01") + c(30,60,90,120,150)
df = data.frame(datefield=x,test=1:length(x))

## load zoo
require(zoo)
## convert to a zoo object, with order given by the `datefield`
df.zoo <- with(df, zoo(test, order.by = x))
## or to a regular zoo object
df.zoo2 <- with(df, zooreg(test, order.by = x))

Now we can easily go to a ts object using the as.ts() method:

> as.ts(df.zoo)
Time Series:
Start = 13920
End = 14040
Frequency = 0.0333333333333333
[1] 1 2 3 4 5
> ## zooreg object:
> as.ts(df.zoo2)
Time Series:
Start = 13909
End = 14029
Frequency = 1
[1] 1 NA NA NA NA NA NA NA NA NA NA NA NA NA NA NA NA NA NA NA
[21] NA NA NA NA NA NA NA NA NA NA 2 NA NA NA NA NA NA NA NA NA
[41] NA NA NA NA NA NA NA NA NA NA NA NA NA NA NA NA NA NA NA NA
[61] 3 NA NA NA NA NA NA NA NA NA NA NA NA NA NA NA NA NA NA NA
[81] NA NA NA NA NA NA NA NA NA NA 4 NA NA NA NA NA NA NA NA NA
[101] NA NA NA NA NA NA NA NA NA NA NA NA NA NA NA NA NA NA NA NA
[121] 5

Notice the two ways in which the objects are represented (although we could have made the zooreg version the same as the standard zoo object by setting the frequency argument to 0.03333333):

> as.ts(with(df, zooreg(test, order.by = datefield, 
+ frequency = 0.033333333333333)))
Time Series:
Start = 13920.0000000001
End = 14040.0000000001
Frequency = 0.033333333333333
[1] 1 2 3 4 5

We can use the zoo/zooreg object in acf() and it will get the correct lags (daily observations but every 30 days):

acf(df.zoo)

acf figure

Whether this is intuitive to you or not depends on how you view the time series. We can do the same thing in terms of a 30-day interval via:

acf(coredata(df.zoo))

where we use coredata() to extract the time series itself, ignoring the date information.

acf figure 2

How do I express a date type in TypeScript?

The type is Date:

const d: Date = new Date(); // but the type can also be inferred from "new Date()" already

It is the same as with every other object instance :)

Proper way to define the date field of my typescript interface that will be loaded from my cloud function?

I'll just address the Typescript part because I haven't used Firebase and don't know how you could refactor the result of Firebase.

If your create_date has the following structure:

{
_seconds: number;
_nanoseconds: number;
}

you can define that as an interface.

<script lang="ts">
interface Order {
order_id: number;
uid: string;
create_date: ResponseDate;
}
// please choose a more fitting name :)
interface ResponseDate {
_seconds: number;
_nanoseconds: number;
}

This should get rid of your VSCode TypeScript error because Typescript now properly understands what create_date is.

Now if you want to later update o.create_date to an actual Date, you need to add that to your interface-definition.

<script lang="ts">
interface Order {
order_id: number;
uid: string;
create_date: ResponseDate | Date; // Can be a ResponseDate or a Date
}
interface ResponseDate {
_seconds: number;
_nanoseconds: number;
}

How do you format a Date/Time in TypeScript?

If you want the time out as well as the date you want Date.toLocaleString().

This was direct from my console:

> new Date().toLocaleString()
> "11/10/2016, 11:49:36 AM"

You can then input locale strings and format string to get the precise output you want.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString

Angular: Setting a date field by dropdown menu's selection

You can work with onchange event. Refer to the table under the Events section.

<p-dropdown
[options]="workStatus"
[showClear]="true"
formControlName="workingStatus"
(onChange)="onDropdownChange($event.value)"
class="col-6"
>
</p-dropdown>
onDropdownChange(value) {
if (value == 'RELEASE')
this.form.controls["getWorkDate"].setValue(new Date());
}

Sample Demo on StackBlitz


Side note:

The dateFormat should be dd-mm-yy instead of dd-mm-yyyy for <p-calendar>. Refer to DateFormat section.

how to declare a date attribute on angular2 model

This is a typescript question. There is not a date type in typescript. You can use Date to indicate a native javascript Date object, but this is just the typing of the field. Angular/TS won't do any magic for you to coerce your value into a Date object. If your data is coming from a JSON source, dates are usually just strings (JSON doesn't support date objects).

How Can I format Date in typescript?

You can use Angular's DatePipe. In the component where you want to format:

add

providers: [DatePipe]

then import class

import { DatePipe } from '@angular/common';

then inject in constructor

constructor(public datepipe: DatePipe){}

and then in the code you can format like

this.datepipe.transform(this.dueDate, 'yyyy/MM/dd')

change format from 'yyyy/MM/dd' to any you need

Bind an input with type datetime-local to a Date property in Angular 2

Demo Plnkr

You can bind to a date using the following format: yyyy-MM-ddTHH:mm, which you can also get from date.toISOString().slice(0,16) (the slice removes the time portion after the minutes).

@Component({
selector: 'app',
template: `<input type="datetime-local" [value]="date"
(change)="date=$event.target.value" /> {{date}}`
})
export class AppComponent {
date: string;
constructor() {
this.date = new Date().toISOString().slice(0, 16);
}
}

Keep in mind that date.toISOString() will return a date offset from local time. You can also construct the date string yourself:

private toDateString(date: Date): string {
return (date.getFullYear().toString() + '-'
+ ("0" + (date.getMonth() + 1)).slice(-2) + '-'
+ ("0" + (date.getDate())).slice(-2))
+ 'T' + date.toTimeString().slice(0,5);
}

If you want to be able to bind the select to a Date model, you can use this to build a custom date component:

@Component({
selector: 'my-date',
events: ['dateChange'],
template: `<input type="datetime-local" [value] = "_date"
(change) = "onDateChange($event.target.value)" />`
})
export class MyDate{
private _date: string;
@Input() set date(d: Date) {
this._date = this.toDateString(d);
}
@Output() dateChange: EventEmitter<Date>;
constructor() {
this.date = new Date();
this.dateChange = new EventEmitter();
}

private toDateString(date: Date): string {
return (date.getFullYear().toString() + '-'
+ ("0" + (date.getMonth() + 1)).slice(-2) + '-'
+ ("0" + (date.getDate())).slice(-2))
+ 'T' + date.toTimeString().slice(0,5);
}

private parseDateString(date:string): Date {
date = date.replace('T','-');
var parts = date.split('-');
var timeParts = parts[3].split(':');

// new Date(year, month [, day [, hours[, minutes[, seconds[, ms]]]]])
return new Date(parts[0], parts[1]-1, parts[2], timeParts[0], timeParts[1]); // Note: months are 0-based

}

private onDateChange(value: string): void {
if (value != this._date) {
var parsedDate = this.parseDateString(value);

// check if date is valid first
if (parsedDate.getTime() != NaN) {
this._date = value;
this.dateChange.emit(parsedDate);
}
}
}
}

Users of your component would bind to a Date model with two-way model binding:

@Component({
selector: 'my-app',
directives: [MyDate],
template: '<my-date [(date)]="date"></my-date> {{date}}'
})
export class AppComponent {
@Input() date: Date;
constructor() {
this.date = new Date();
}
}

Or if you want to avoid custom tags, rewrite the component as a directive:

<input type="datetime-local" [(date)]="date" />

Demo Plnkr with Directive



Related Topics



Leave a reply



Submit