joanllenas / ngx-date-fns Goto Github PK
View Code? Open in Web Editor NEW⏳ date-fns pipes for Angular
⏳ date-fns pipes for Angular
Description of the Issue and Steps to Reproduce:
I see from other issues that your pipes support passing in an options argument for date-fns, and thus it supports i18n. I'm new to date-fns however, and haven't written many pipes of my own yet.I would really love to see an example of how i18n works with the angular pipes you provide for the library since loading the locale and passing in the desired locale may not be immediately obvious.
Did you search for duplicate issue? [Yes / No]
Yes
Please describe the issue and steps to reproduce, preferably with a code sample / plunker:
No real steps to reproduce, just looking for a clear i18n example in the README.md file of the project if it isn't too much trouble.
Ensure your issue is isolated to ngx-date-fns. Issues involving third party tools will be closed unless submitted by the tool's author/maintainer.
Environment:
Please answer the following questions:
date-fns
version?Hello,
I wanted to use the dfnsDistanceInWords
pipe to convert a number in a duration string (an absolute number, ie. a time interval but not a date per se).
For that, I usually cheat with distanceInWords
function by passing a "zero" date for comparison, so I have two "absolute" referentials.
Ex: dateFns.distanceInWords(0, myDuration)
would return something like "less than a minute".
Refactoring some code to use the pipes, I noticed that ngx-date-fns does not allow to pass "0" dates:
ERROR Error: dfnsDistanceInWords: missing required arguments
at DistanceInWordsPipe.transform (ngx-date-fns.js:76) [angular]
The reason is that ngx-date-fns checks the input and does not allow any flasey value :
Instead of:
if (!dateToCompare || !date) {
throw new Error(DistanceInWordsPipe.NO_ARGS_ERROR);
}
We should have :
if (dateToCompare == undefined || date == undefined) {
throw new Error(DistanceInWordsPipe.NO_ARGS_ERROR);
}
Loosy comparison with undefined works here, 0 would be allowed but not undefined or null, which would be expected.
Obviously, there are other pipes concerned. For now, I'll use 1
instead of 0
:)
Hi Joanllenas!
Thx for adding pipes in this issue! But you didn't add isToday, it will be nice to use it
And also will be good to have pipes such as isWeekend and isSameMonth or something like this
Thx a lot for you job!)
Branch | Build failing 🚨 |
---|---|
Dependency | @types/node |
Current Version | 8.0.55 |
Type | devDependency |
This version is covered by your current version range and after updating it in your project the build failed.
@types/node is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
Hi!
I found myself needing a dfnsParseIso pipe since the dates coming from my server API are ISO-formatted (ie. not localized) and since date-fns 2.0 doesn't supports strings anymore.
import { Pipe, PipeTransform } from '@angular/core';
import { parseISO } from 'date-fns';
@Pipe({
name: 'myDfnsParseIso',
pure: true
})
export class DfnsParseIsoPipe implements PipeTransform {
public transform(value: string, options?: { additionalDigits?: 0 | 1 | 2 }): Date {
return parseISO(value, options);
}
}
Description of the Issue and Steps to Reproduce:
Did you search for duplicate issue? Yes
Please describe the issue and steps to reproduce, preferably with a code sample / plunker:
Some pipes are missing, which are available in date-fns
.
Ensure your issue is isolated to ngx-date-fns. Issues involving third party tools will be closed unless submitted by the tool's author/maintainer.
Environment:
Browser.
Please answer the following questions:
date-fns
version? 2.25.0I get nearly 100 errors like "node_modules\ngx-date-fns\fesm2015\ngx-date-fns.js depends on 'date-fns/parseISO'. CommonJS or AMD dependencies can cause optimization bailouts.". I thought it was coming from date-fns, but after a lot of headache I decided to remove your package, and by my surprise date-fns was working just fine without it!
Description of the Issue and Steps to Reproduce:
Looks like the current implementation always imports all the pipe, making the final bundle excessively large:
It would be better to be able to import pipes in a more selective way, in order not to increase the final app size including unused code.
Environment:
Please answer the following questions:
ng-xdate-fns
version? 2.0.3Branch | Build failing 🚨 |
---|---|
Dependency | @angular/core |
Current Version | 4.3.4 |
Type | devDependency |
This version is covered by your current version range and after updating it in your project the build failed.
As @angular/core is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.
I recommend you give this issue a high priority. I’m sure you can resolve this 💪
There is a collection of frequently asked questions and of course you may always ask my humans.
Your Greenkeeper Bot 🌴
Description of the Issue and Steps to Reproduce:
Since date-fns@3
a string
is a valid input as date. With the dfns pipes it is not:
export type DateFnsInputDate = number | Date;
Environment:
Please answer the following questions:
date-fns
version: 3.6.0Description of the Issue and Steps to Reproduce:
Hello 👋 ! I'd like to propose the addition of a new dfnsFormatRelativeToNow
pipe which assumes new Date()
as the second argument. Alternatively you could modify dfnsFormatRelative
pipe to behave that way here, but I understand perhaps you want to keep that pipe consistent with the original behavior in date-fns
(although having a default wouldn't be a breaking change, IMO).
Motivation
For my usecase(s), and probably others as well, the most common scenario in which I use that pipe is I want to see the date relative to "now". The required pipe argument becomes an issue because then in every component I need to have a field to expose the current date, like so:
@Component({
template: '<div>{{ someDate | dfnsFormatRelative: now }}</div>'
})
export class MyComponent {
get now(): Date {
return new Date();
}
// ...
}
I'd much rather not have to create my own pipe just to add that default argument 😄 .
Thanks!
Recreate all examples in stackblitz and add the links in the documentation.
Branch | Build failing 🚨 |
---|---|
Dependency | awesome-typescript-loader |
Current Version | 3.2.1 |
Type | devDependency |
This version is covered by your current version range and after updating it in your project the build failed.
As awesome-typescript-loader is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.
I recommend you give this issue a high priority. I’m sure you can resolve this 💪
There is a collection of frequently asked questions and of course you may always ask my humans.
Your Greenkeeper Bot 🌴
Hi, are there any plan to release a version compatibile with date-fns v2?
Thanks
Branch | Build failing 🚨 |
---|---|
Dependency | @angular/platform-browser-dynamic |
Current Version | 4.3.2 |
Type | devDependency |
This version is covered by your current version range and after updating it in your project the build failed.
As @angular/platform-browser-dynamic is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.
I recommend you give this issue a high priority. I’m sure you can resolve this 💪
There is a collection of frequently asked questions and of course you may always ask my humans.
Your Greenkeeper Bot 🌴
Branch | Build failing 🚨 |
---|---|
Dependency | @angular/compiler-cli |
Current Version | 4.3.6 |
Type | devDependency |
This version is covered by your current version range and after updating it in your project the build failed.
As @angular/compiler-cli is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.
I recommend you give this issue a high priority. I’m sure you can resolve this 💪
There is a collection of frequently asked questions and of course you may always ask my humans.
Your Greenkeeper Bot 🌴
Hello,
I am using OnPush
components and DateFnsConfigurationService.setLocale
to change language at runtime. I react to LangChangeEvent
s from ngx-translate to sync the locale used by ngx-date-fns.
The thing is, I use OnPush components and that prevents Angular from cheking the pipes used in the component. Since the locale is changed outside of the Inputs of the component, Angular doesn't replays the pipes' transform.
However, the pipes from ngx-translate work just fine when changing the locale globally. So I went to see how they've done, and each pipe subscribes to locale changes from the TranslateService
and mark themselves for check : https://github.com/ngx-translate/core/blob/master/projects/ngx-translate/core/src/lib/translate.pipe.ts#L25.
Would it be possible to implement the same here, on the library's side? For now I'll workaround that with the component subscribing to changes from my custom service, in order to call the change detector from the component.
Little addendum: the declaration of locale()
/ setLocale()
could be improved so they take/return object | undefined
instead of Object
. undefined
is the built-in "en" locale. In strictNullChecks
mode, it causes type-checking error and I have to cast the value.
Thanks for your work!
PS: On a side note, will you plan to support date-fns v.2 when it's out ?
Is there any plan to integrate with the localization used by angular instead of having it being passed by options manually?
This would work in the same way as the i18n pipes of angular, see https://angular.io/api/core/LOCALE_ID.
I want to auto-detect the formatting based on user language. I find myself writing a configuration factory like:
import {de, enGB, enUS, fr, it} from 'date-fns/locale';
const dateLocaleFactory = () => {
const lang = navigator.language;
if (lang.startsWith('en')) {
if (lang === 'en-GB') {
return enGB;
} else {
return enUS;
}
} else if (lang.startsWith('de')) {
return de;
} else if (lang.startsWith('it')) {
return it;
} else if (lang.startsWith('fr')) {
return fr;
} else { // default
return enUS;
}
};
const dateConfigFactory = () => {
const c = new DateFnsConfigurationService();
c.setLocale(dateLocaleFactory());
return c;
};
I wonder if there is a helper function or better way of implementing all available languages? I know date-fns is written in a way to not import all locale but it would be great to have a function which would ease the process of auto-detecting the language. Are there some ideas or better ways to solve it instead of a giant if else?
Question: Is it normal to have warnings like ...js depends on 'date-fns/...'. CommonJS or AMD dependencies can cause optimization bailouts.
and is the supposed way to fix it to add date-fns to allowedCommonJsDependencies
? If so, doesnt it make sense to add the instruction to the readme?
Also is there an open issue on date-fns project to build ecmascript modules?
Hi,
thanks for your awesome work.
Just wondering, are you going to support locale? https://date-fns.org/v1.29.0/docs/I18n
With Angular strict mode all inputs need to be optional:
export class myComponent implements OnInit {
@Input() myDate?: number;
}
Or using the async pipe returns null
:
<app-my-compontent [myDate]="myDate$ | async"></app-my-component>
But then the compiler is throwing an error with ngx-date-fns pipes, e.g.:
Type 'undefined' is not assignable to type 'DateFnsInputDate'.
{{ myDate | dfnsFormat: 'dd.MM.yyyy'}}
I would suggest to add strict typechecking to tsconfig:
"angularCompilerOptions": {
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true,
"preserveSymlinks": true
}
and add a questionmark to all pipe inputs to support undefined
and also accept null
, e.g. the format pipe:
transform(
date?: DateFnsInputDate | null,
...
): string {
if (!date || isInvalidDate(date)) {
return '';
}
...
}
}
Please check my suggestion for pipe <div>{{0 | dfnsWeekdayName:weekdayName.short}}</div>
import locale from 'date-fns/esm/locale/ru';
enum WeekdayName {
full = 'full',
short = 'short'
}
function getWeekdayName(day: number, view: WeekdayName = WeekdayName.full) {
const now = new Date();
const week = eachDayOfInterval({
start: startOfWeek(now, {locale: locale}),
end: endOfWeek(now, {locale: locale})
});
return format(week[day], view === WeekdayName.short
? 'EEEEEE' : 'EEEE', {locale: locale});
}
console.log(getWeekdayName(0, WeekdayName.short)); // пн
console.log(getWeekdayName(1)); // вторник
The pipe will be useful to create calendars as we should write weekdays names based on current locale.
To see what happens to your code in Node.js 10, Greenkeeper has created a branch with the following changes:
.travis.yml
If you’re interested in upgrading this repo to Node.js 10, you can open a PR with these changes. Please note that this issue is just intended as a friendly reminder and the PR as a possible starting point for getting your code running on Node.js 10.
Greenkeeper has checked the engines
key in any package.json
file, the .nvmrc
file, and the .travis.yml
file, if present.
engines
was only updated if it defined a single version, not a range..nvmrc
was updated to Node.js 10.travis.yml
was only changed if there was a root-level node_js
that didn’t already include Node.js 10, such as node
or lts/*
. In this case, the new version was appended to the list. We didn’t touch job or matrix configurations because these tend to be quite specific and complex, and it’s difficult to infer what the intentions were.For many simpler .travis.yml
configurations, this PR should suffice as-is, but depending on what you’re doing it may require additional work or may not be applicable at all. We’re also aware that you may have good reasons to not update to Node.js 10, which is why this was sent as an issue and not a pull request. Feel free to delete it without comment, I’m a humble robot and won’t feel rejected 🤖
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
I think rxjs-compat is needed. You could replace imports like import { Subject } from "rxjs/Subject" with import { Subject } from "rxjs'
Hi @joanllenas as we discussed in #309
I offer to configure locale in module directly DateFnsModule.forRoot({locale: ru})
.
The main advantage of this is all pipes could be pure and that will be good for performance.
import ru from 'date-fns/locale';
@NgModule({
imports: [
DateFnsModule.forRoot({locale: ru})
]
The disadvantage is that we will not be able to change locale dynamically.
Or we will need to reload the page, e.g.
import ru, de from 'date-fns/locale';
let locale;
const code = localStorage.locale || 'ru';
switch(code) {
case 'de':
locale = de;
break;
default:
locale = ru;
}
@NgModule({
imports: [
DateFnsModule.forRoot({locale: locale})
]
What do you think? Thanks a lot!
Branch | Build failing 🚨 |
---|---|
Dependency | @types/node |
Current Version | 8.5.5 |
Type | devDependency |
This version is covered by your current version range and after updating it in your project the build failed.
@types/node is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
Branch | Build failing 🚨 |
---|---|
Dependency | typescript |
Current Version | 2.4.0 |
Type | devDependency |
This version is covered by your current version range and after updating it in your project the build failed.
As typescript is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.
I recommend you give this issue a high priority. I’m sure you can resolve this 💪
The new version differs by 141 commits.
8b2fe13
Update LKG.
14d95ed
Test:Block-scoped definition of Promise works
a8846bf
Skip block scope check with no error location
44f2336
Merge pull request #16633 from Microsoft/release-2.4_fixIncrementalParsing
4875a27
Add tests
15ef20d
Set the structureReused to be safemoudles when dynamic import change
6d33083
Add tests
11b9f6e
Wip-fix incremental parsing
2721fd4
In TypeScript code, never bind JSDoc normally, just set parent pointers (#16555) (#16561)
0968ed9
Revert string enum changes (#16569)
096f8cc
Update LKG
9241175
Allow running in strict mode (#16557)
f49b007
Update LKG
f1b0f59
Update version to 2.4.1
ed9cde9
Update LKG
There are 141 commits in total.
See the full diff
There is a collection of frequently asked questions and of course you may always ask my humans.
Your Greenkeeper Bot 🌴
During the build of a project, angular-cli 13 issues the following message :
⠙ Generating browser application bundles (phase: setup)...Processing legacy "View Engine" libraries:
- ngx-date-fns [es2015/esm2015] (git+https://github.com/joanllenas/ngx-date-fns.git)
Encourage the library authors to publish an Ivy distribution.
Except this message ngx-date-fns works fine. But it seems something has to be done in the ngx-date-fns library.
Description of the Issue and Steps to Reproduce:
Did you search for duplicate issue? [Yes / No] Yes
Please describe the issue and steps to reproduce, preferably with a code sample / plunker:
Hi it looks like dfnsIsEqual pipe is not working properly. Or maybe I'm doing something wrong.
Here you can find dfnsIsEqual (results: false) together with isEqual function (results: true)
https://stackblitz.com/edit/ngx-date-fns-is-equal?file=src/app/hello.component.ts
Ensure your issue is isolated to ngx-date-fns. Issues involving third party tools will be closed unless submitted by the tool's author/maintainer.
Environment:
Please answer the following questions:
date-fns
version? 7.0.2Branch | Build failing 🚨 |
---|---|
Dependency | @angular/compiler |
Current Version | 4.4.1 |
Type | devDependency |
This version is covered by your current version range and after updating it in your project the build failed.
As @angular/compiler is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.
I recommend you give this issue a high priority. I’m sure you can resolve this 💪
There is a collection of frequently asked questions and of course you may always ask my humans.
Your Greenkeeper Bot 🌴
When having lazy loaded modules:
- AppModule
- LazyModule1
- LazyModule2
Should AppModule import with forRoot()
and all others without? Or should all 3 import with forRoot?
Maybe would be nice if you could add this information to the docs, too :)
Description of the Issue and Steps to Reproduce:
Did you search for duplicate issue? [Yes]
Please describe the issue and steps to reproduce, preferably with a code sample / plunker:
Requires angular 13.2.* in peer
Environment:
Ionic:
Ionic CLI : 6.19.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.1.9
@angular-devkit/build-angular : 14.0.1
@angular-devkit/schematics : 14.0.1
@angular/cli : 14.0.1
@ionic/angular-toolkit : 6.1.0
Cordova:
Cordova CLI : 10.0.0 ([email protected])
Cordova Platforms : android 10.1.1, ios 6.2.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 10 other plugins)
Utility:
cordova-res : 0.15.4
native-run : 1.6.0
System:
Android SDK Tools : 26.1.1 (/Users/vs/Library/Android/sdk)
ios-deploy : 1.11.4
ios-sim : 8.0.2
NodeJS : v14.18.1 (/usr/local/bin/node)
npm : 8.10.0
OS : macOS Monterey
Xcode : Xcode 13.4.1 Build version 13F100
Please answer the following questions:
date-fns
version? latestBranch | Build failing 🚨 |
---|---|
Dependency | @types/node |
Current Version | 8.0.52 |
Type | devDependency |
This version is covered by your current version range and after updating it in your project the build failed.
@types/node is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
Hello, @joanllenas
Thx for your last update
You have added IsSameMonth, IsSameYear will be nice to use too)
Thx a lot!
Hello again)
Do you plan to add pipes based on date-fns functions like isToday, isPast and isFuture?
Description of the Issue and Steps to Reproduce:
Did you search for duplicate issue? [Yes]
Please describe the issue and steps to reproduce, preferably with a code sample / plunker:
@Component({
selector: 'app-a',
template: `
<div>{{empty|dfnsFormatDistanceToNow}}</div>
`,
})
export class ExamBComponent implements OnInit {
empty: undefined = undefined;
}
This will throw:
ERROR RangeError: Invalid time value
at formatDistance (index.js:134)
at formatDistanceToNow (index.js:111)
at FormatDistanceToNowPipe.transform (ngx-date-fns.js:971)
...
Description of the Issue and Steps to Reproduce:
Hi
I tried to upgrade my project dependencies and switched from date-fns 2.30.0 to 3.0.6.
However I received a lot of errors after that:
Type 'typeof import("/node_modules/date-fns/closestTo")' provides no match for the signature '(...args: any): any'. [plugin angular-compiler]
[ERROR] TS2304: Cannot find name 'Duration'. [plugin angular-compiler]
node_modules/ngx-date-fns/lib/format-duration.pipe.d.ts:11:24:
11 │ transform(duration: Duration, options?: {
[ERROR] TS2304: Cannot find name 'Locale'. [plugin angular-compiler]
node_modules/ngx-date-fns/lib/is-match.pipe.d.ts:12:17:
12 │ locale?: Locale;
Environment:
Please answer the following questions:
date-fns
version? 3.0.6Branch | Build failing 🚨 |
---|---|
Dependency | mocha |
Current Version | 3.4.2 |
Type | devDependency |
This version is covered by your current version range and after updating it in your project the build failed.
As mocha is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.
I recommend you give this issue a high priority. I’m sure you can resolve this 💪
--forbid-only
and --forbid-pending
flags. Use these in CI or hooks to ensure tests aren't accidentally being skipped! (@charlierudolph)--napi-modules
flag (@jupp0r)The new version differs by 34 commits.
82d879f
Release v3.5.0
bf687ce
update mocha.js for v3.5.0
ec73c9a
update date for release of v3.5.0 in CHANGELOG [ci skip]
1ba2cfc
update CHANGELOG.md for v3.5.0 [ci skip]
065e14e
remove custom install script from travis (no longer needed)
4e87046
update karma-sauce-launcher URL for npm@5
6886ccc
increase timeout for slow-grepping test
2408d90
Make dependencies use older version of readable-stream to work around incompatibilities introduced by 2.3.0 on June 19th
68a1466
Try not clearing the env for debug in the integration test and see if that fixes Node 0.10 on AppVeyor; if need be, some other fix/workaround can be applied to handle whatever was up with debug without causing this issue
958fbb4
Update new tests to work in browser per test hierarchy reorganization
1df7c94
Merge pull request #2704 from seppevs/increase_test_coverage_of_mocha_js
1f270cd
Stop timing out (#2889)
27c7496
upgrade to [email protected]; closes #2859 (#2860)
50fc47d
fix CI; closes #2867 (#2868)
1b1377c
Add test for ignoreLeaks and fix descriptions
There are 34 commits in total.
See the full diff
There is a collection of frequently asked questions and of course you may always ask my humans.
Your Greenkeeper Bot 🌴
Update the library to use date-fns 2.0.0.
Currently, using it with date-fns 2.0.0, it gives multiple warnings of functions not being found, ex.:
WARNING in ./node_modules/ngx-date-fns/esm5/ngx-date-fns.es5.js 1090:15-26
"export 'addISOYears' was not found in 'date-fns'
Hi,
I followed the instructions to Changing locale globally.
The next error appears:
ERROR in src/app/app.module.ts(43,27): error TS2306: File '.../node_modules/date-fns/locale/es/index.d.ts' is not a module.
I can serve the app and is working but the error is very anoying.
What can i do ?¿
date-fns
version? 1.30.1Thanks in advance.
The documentation says:
The library itself is optimized to be tree-shakable by just importing DateFnsModule.forRoot()
I did this and checked with ng build --stats-json
and then using webpack-bundle-analyzer
to see full 512kb ngx-date-fns is imported:
But when I import just the specific pipe it works and ngx-date-fns is not even visible.
Dont try to reproduce with something newer than 2.16.1 since newer versions do not support tree shaking in the first place: date-fns/date-fns#2207
Angular 16 support ?
Please answer the following questions:
Angular version? 16.x
TypeScript version? 5.x
Branch | Build failing 🚨 |
---|---|
Dependency | css-loader |
Current Version | 0.28.7 |
Type | dependency |
This version is covered by your current version range and after updating it in your project the build failed.
css-loader is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.
The new version differs by 10 commits.
0fc46c7
chore(release): 0.28.8
333a2ce
chore(package): update dependencies
39773aa
ci(travis): use npm
8897d44
fix: proper URL escaping and wrapping (url()
) (#627)
0dccfa9
fix(loader): correctly check if source map is undefined
(#641)
d999f4a
docs: Update importLoaders documentation (#646)
05c36db
test: removed redundant modules
argument (#599)
c45fa66
test: add case for url
processing (#603)
7039740
docs(README): add anchor tags to options table (#609)
0840c80
Fix markdown for link to webpack resolve.alias doc (#595)
See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
Hi Joan!
Thanks for the great library.
Why you don't use DateFnsConfigurationService
and calculateLocale()
in most of pipes, e.g. start-of-week as you used it in format-distance for getting default locale options?
Do you plan to upgrade your pipes or can we propose you to make merge requests?
I am trying to migrate ngx-moment to ngx-date-fns since momentjs is no longer maintained. Only I understand that it is not quite possible to do the same thing. In my case all dates are stored in UTC in the database. The "format" of the dates returned by the backend is in ISO (C# ASP Core).
So to date I was doing this for example with ngx-moment:
{{ myDate | amFromUtc | amLocal | amDateFormat:'LL' }}
I understand that the equivalent of amFromUTC
is dfnsParseIso
in ngx-date-fns
But what about amLocal
how to do it? I see that you should use date-fns-tz but ngx-date-fns doesn't offer a pipe to use it. So I created something like that, but it doesn't work, the date displayed is still not according to the user's timezone.
import { Pipe, PipeTransform } from '@angular/core';
import { zonedTimeToUtc, utcToZonedTime, format } from 'date-fns-tz';
@Pipe({ name: 'utcToZonedTime' })
export class UtcToZonedTimePipe implements PipeTransform {
transform(
dateString: string
): string {
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
return utcToZonedTime(dateString, timezone);
}
}
Have you got an idea? Why not integrate the pipe to use date-fns-tz?
Thanks
Description of the Issue and Steps to Reproduce:
Hey, I want to share a suggestion to add *Duration pipes for formatDuration, formatISODuration and intervalToDuration functions.
Did you search for duplicate issue? Yes.
Please answer the following questions:
date-fns
version? 2.17.0To improve documentation:
Create a pure version of all impure pipes:
It'd be cool if you could also format timezone-aware dates. For that you need the format function from date-fns-tz.
I'm willing to create a PR, but I wanted to check if/how you'd integrate a feature like that.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.