refactor(module:date-picker): use directive instead of extends class

[wenqi73]

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Application (the showcase website) / infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

[zorro-bot]

This preview will be available after the AzureCI is passed.

[codecov]

Codecov Report

Merging #4898 into master will decrease coverage by <.01%.
The diff coverage is 96.87%.

@@            Coverage Diff             @@
##           master    #4898      +/-   ##
==========================================
- Coverage   91.51%   91.51%   -0.01%     
==========================================
  Files         543      542       -1     
  Lines       13786    13771      -15     
  Branches     2045     2045              
==========================================
- Hits        12616    12602      -14     
  Misses        698      698              
+ Partials      472      471       -1

Impacted Files	Coverage Δ
components/date-picker/lib/util.ts	100% <ø> (+2.5%)	⬆️
components/date-picker/testing/util.ts	100% <ø> (ø)	⬆️
...omponents/date-picker/calendar-footer.component.ts	96% <ø> (ø)	⬆️
components/date-picker/picker.component.ts	94.11% <ø> (ø)	⬆️
components/date-picker/inner-popup.component.ts	88.46% <ø> (ø)	⬆️
...mponents/date-picker/date-range-popup.component.ts	91.87% <ø> (ø)	⬆️
components/date-picker/year-picker.component.ts	100% <100%> (ø)	⬆️
components/date-picker/range-picker.component.ts	100% <100%> (ø)	⬆️
components/date-picker/week-picker.component.ts	100% <100%> (ø)	⬆️
components/date-picker/month-picker.component.ts	100% <100%> (ø)	⬆️
... and 5 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a0a191a...9462ebd. Read the comment docs.

[vthinkxie]

ref angular/angular#32431