technikhil314 / angular-components Goto Github PK

Hi @nikhil-001mehta ,
I'm glad to see the new useful features you've added and the nice work that are you doing.
So today I'm here to suggest a new feature.
Is it possible to "connect/correlating" the two calendar? Let me explain it better:

• in the first calendar, we have January and in the second February.
  • If the user selects the next month, both calendars update, so the first has February, and the second has March.
  • If the user selects the previous month, both calendars update, so the first has December, and the second has January.
• I can choose the start date and the end date on the same calendar.

I give you a working example to make you understand better what I mean -> http://airbnb.io/react-dates

Do you think that this is a possible implementable option? Maybe the logic you've used on your datePicker is not "compatible" with this scenario? Or maybe my suggestion is completely out of scope?

Let me know what you thinks.

Thanks

Hi.
Using your program, I faced a small error.
It's in calendar-component.ts: 67.
exactly, it's this.length.
An error is following:
ERROR TypeError: Cannot read property 'length' of undefined
please, how can i fix this error?

Thanks.

I need to use this component within an *ngFor loop in HTML. The objects in the loop have the existing date ranges that I need to populate the control with. So for example, I want to do this:

<div class="form-group" *ngFor="let dateof dates">
    <div class="input-group" 
        daterangepicker 
        [options]="{startDate: date.start, endDate: date.end}" 
        (selected)="selectedDate($event, date)" > 
    </div>
</div>

This is not working for me however. Maybe I'm writing it incorrectly? I know that the control has a setStartDate()/setEndDate() function however I'm not sure how to make those work within the loop.

Any thoughts on how I might get this working?

Thanks!

ERROR in ./node_modules/angular-2-daterangepicker/daterangepicker-options.ts
Module build failed: Error: C:\mypath\node_modules\angular-2-daterangepicker\daterangepicker-module.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).

I followed the instructions to install. after adding it up in the module, this error showed up.
Im using angular5 now.

Hi,

I have few suggestions for better experience and usability of this component.

If it's possible to add feature two calendars to be linked (left calendar to show eg. December and the right calendar to show January) and the user to be able to select date range as he wants from December to January or just in December or in January etc. This option to be controlled by flag in date range picker options (eg: linkedCalendars: true/false)

Also for inputs in date range picker can you add flag in options developer to check if he wants inputs to be readOnly or end-user can add custom dates (some users prefer to add custom dates in inputs and then they will be selected in calendars)

Thanks in advance.
Daniel

I think toggling time-picker options is convenient.
But sometimes i feels to toggle the two input-boxes on the top.
if then , it will looks more smart , i think.
Thanks.

I use the plugin in an Angular 8 application, and on building/serving the application with the --prod flag, the calendar breaks.

Steps to reproduce the behavior:

1. Make an Angular 8 application.
2. Add calendar to it in some way.
3. Serve using ng serve --prod true
4. See error

Expected behavior
This is what the calendar looks like without --prod:

This is what it looks like with --prod

I've been able to consistently replicate the issue over all versions of the library, including the ones that used moment.js instead of dayjs. I've tried different styles for importing:

import { Dayjs } from 'dayjs';
import * as dayjs from 'dayjs';
import dayjs from 'dayjs';

and I've added "allowSyntheticDefaultImports": true to my tsconfig.json as well. Nothing helps.

Hi, How to use one calendar for select start date and end date?

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
If it is possible to take formControlName as Input and use it to support and set the date range string to text content and return the start and end date as array like some other bootstrap date range picker.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Unexpected value 'DaterangepickerModule in /xxx/node_modules/angular-2-daterangepicker/index.js' imported by the module 'AgreeGatewayV1DashboardverModule in myprj/my.module.ts'. Please add a @NgModule annotation.

Hi Nikhil

I have imported and started utilizing you angular-2-daterangepicker. when i'm running in a developer env this is working fine. But when i'm trying to make a package to run in prod env, its through below error. Can you please help me out in this.

Unexpected value 'DaterangepickerModule in /xxx/node_modules/angular-2-daterangepicker/index.js' imported by the module 'myModule in myprj/my.module.ts'. Please add a @NgModule annotation.

i am using "@angular/core": "4.4.6".

I read below URL, does this applicable. If so how can i upgrade andgular/core version of angular-2-daterangepicker.
`

angular/angular#15763

`

ngSubmit fires form submission on apply, cancel and other buttons without type="button"

Is it hard to you to deploy to npm typescript verion of your files?
So that angular projects could reference your package easier, otherwise there is an error about NgModule annotation.

1. This datepicker doesn't work with latest Angular release (please fix the issue reported in #38)
   Getting this error:
   DaterangepickerComponent.html:28 ERROR TypeError: this.fromDate.format is not a function at DaterangepickerComponent.push../node_modules/angular-2-daterangepicker/daterangepicker-component.js.DaterangepickerComponent.formatFromDate (daterangepicker-component.js:353) at Object.eval [as handleEvent] (DaterangepickerComponent.html:31)

When startDate and endDate is not set or set to NULL
this.daterangepickerOptions = { startDate: null, endDate: null, ...

I think many users use this daterangepicker for reservation, booking something, so it would be nice to add a feature for disabling specific dates.

When trying to select date:

DaterangepickerComponent.html:28 ERROR TypeError: this.fromDate.format is not a function
at DaterangepickerComponent.push../node_modules/angular-2-daterangepicker/daterangepicker-component.js.DaterangepickerComponent.formatFromDate (daterangepicker-component.js:353)
at Object.eval [as handleEvent] (DaterangepickerComponent.html:31)

Describe the bug
Build error:

[ng] 32 DatetimerangepickerModule,
[ng] ~~~~~~~~~~~~~~~~~~~~~~~~~
[ng]
[ng] node_modules/angular-datetimerangepicker/datetimerangepicker.module.d.ts:1:22
[ng] 1 export declare class DatetimerangepickerModule {
[ng] ~~~~~~~~~~~~~~~~~~~~~~~~~
[ng] This likely means that the library (angular-datetimerangepicker) which declares DatetimerangepickerModule is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

To Reproduce
Steps to reproduce the behavior:

1. Install the latest version of Angular (v16.0.3 at the moment)
2. Add this dependency
3. ng serve

Expected behavior
Succeeded build

Desktop (please complete the following information):

Ionic:

Ionic CLI : 7.1.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 7.0.9
@angular-devkit/build-angular : 16.0.3
@angular-devkit/schematics : 16.0.3
@angular/cli : 16.0.3
@ionic/angular-toolkit : 9.0.0

Capacitor:

Capacitor CLI : 5.0.4
@capacitor/android : 5.0.4
@capacitor/core : 5.0.4
@capacitor/ios : 5.0.4

Utility:

cordova-res : 0.15.4
native-run : 1.7.2

System:

NodeJS : v20.2.0 (/usr/local/Cellar/node/20.2.0/bin/node)
npm : 9.6.7
OS : macOS Unknown

Describe the bug
Wheb clicking on a predefined range, the date is not set correctly to the predefined range, instead it is set to today.

To Reproduce
Steps to reproduce the behavior:

1. Open date picker
2. Click on any predefined range
3. Observe that the date is not set correctly.

Expected behavior
The predefined date range should apply to the picker.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows 10
• Browser chrome
• Version 103

Additional context
Using angular version 14.1

Do I need that preinstall set if I don't plan on developing inside the library? I'd like to use it, but I don't want to install those extra libraries, or force my team to as well. This occurs when just doing a normal npm install angular-2-daterangepicker.

In angular-2-daterangepicker,we are not able to set date to null in control.Please let me know that how to set null date or default label in that control

Describe the bug
When the ionic-selectable is used on the same view with the datepicker - there is a bug, when selecting a value in the popup model of the ionic selectable. Have to click no the modal itself, and only then an option can be selected.

This happens only when the datepicker is on the same view with this plugin.

I do not know why this happens, but I thinks it happens because of some click events are caught by the datepicker...

To Reproduce
Steps to reproduce the behavior:
Install the latest version of the datepicker
install the latest version of ionic selectable
you can take any example code to reproduce, but remember to add datepicker to the view

Expected behavior
The datepicker should not affect the work of ionic selectable plugin

Hi Am getting below error, while installing..
package.json

"dependencies": {
"@angular/animations": "~11.2.8",
"@angular/cdk": "~11.2.13",
"@angular/common": "~11.2.8",
"@angular/compiler": "~11.2.8",
"@angular/core": "~11.2.8",
"@angular/forms": "~11.2.8",
"@angular/material": "~11.2.13",
"@angular/platform-browser": "~11.2.8",
"@angular/platform-browser-dynamic": "~11.2.8",
"@angular/router": "~11.2.8",
}

Could you pls help me on this?

dates are not clickable and not updated in view

https://github.com/nikhil-001mehta/angular-2-daterangepicker/blob/bfecf06688f574503e8f60278b001dd8bb06c04f/daterangepicker-component.ts#L274-L275

If fromDate is undefined: this.fromDate.format is not a function.
Missing condition in if statement.

Please give me solution how to resolve it.I can not get the date range into my .ts file. when we use autoApply:true with daterangepickerOptions then it work. but i need it on apply click.

hi im trying to import the daterangepicker component and im getting this error:

im importing like this:
import { DaterangepickerComponent } from 'angular-datetimerangepicker/daterangepicker/daterangepicker.component';
and i do have the module in my app.module.ts

Describe the bug
00d928a
This commit is not included on the npmjs.org build

Expected behavior
The commit should be included

Is your feature request related to a problem? Please describe.

The material theme is not matching yours:

Describe the solution you'd like

By allowing <mat-form-field> around your control, material theming will be applied

    <mat-form-field>
      <daterangepicker
        class="col-md-12 col-lg-12 form-control"
        [options]="daterangepickerOptions"
        (rangeSelected)="dateChanged($event)">
      </daterangepicker>
    </mat-form-field>

The code above generates the followwing error:

mat-form-field must contain a MatFormFieldControl.

Maybe because matInput directive is maybe not present.

Describe alternatives you've considered

Providing manually full HTML/CSS theming generated by Material

Let me know if I missed something.

Is your feature request related to a problem? Please describe.
In some cases, you don't want to allow the user to clear the date

Describe the solution you'd like
Have a new property to show/hide the Clear button (why not also the others)

It seems as the custom locale is en-EN : 01 / April / 2022

I would need to show dates in french locale : 01 / Avril / 2022

Could we add a custom locale to display dates ?

Hi,

Thanks for such a good module but this seems not working with angular 6 . I'm unable to select dates until i give min date and max date into options. In all other scenarios dates in calendar are not clickable.

Bug:
The "Auto Apply" option is not working.

Expected Behaviour:
I couldn't find a description to what it is supposed to do, but I'm assuming it is used in combo with "hide controls" so we can get the output on the day selection action.

Reproduce:

• Angular 12.0.4
• Datetimerangepicker: 2.4.3
• Chrome Version 91.0.4472.114
  (As for now jul/2021 the demo is also not working https://angular-datetimerangepicker.surge.sh/)

__ footnote:
Very useful module, thank you sir :)

im using your component in my project and it would be cool if there was an optiion to remove the clear button or the entire bottom row of buttons

Hi, I have worked one angular 4 application. I have check this date picker, but there is no mention in the document. Please tells us is it compatible with angular 4application.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

DaterangepickerComponent.html:7 ERROR TypeError: moment.range is not a function
at CalendarComponent.createCalendarGridData (calendar-component.ts:101)
at CalendarComponent.ngOnChanges (calendar-component.ts:116)
at checkAndUpdateDirectiveInline (core.es5.js:10833)
at checkAndUpdateNodeInline (core.es5.js:12332)
at checkAndUpdateNode (core.es5.js:12271)
at debugCheckAndUpdateNode (core.es5.js:13132)
at debugCheckDirectivesFn (core.es5.js:13073)
at Object.View_DaterangepickerComponent_0._co [as updateDirectives] (DaterangepickerComponent.html:10)
at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13058)
at checkAndUpdateView (core.es5.js:12238)

Please impliment Clear button.now i am not able to clear

Are you working on this? The files changed were around 4 months back.

We are using this component on our Angular app, so we need first day of week to be Monday, we can't find solution to make this.

Is there any property in Options to set the first day in Calendar to be Monday, or how can we solve this? We didn't find anything of that.

If doesn't exist, I'm suggesting you to implement this feature in next versions of this component, it is useful for user from the eastern parts of the Earth.

Is there any problem?

Erro on app.module:
Could not find a declaration file for module 'angular-2-daterangepicker'. '/home/desenvolvimento017/repositorio/ecm-admin-frontend/ecm-admin-frontend/node_modules/angular-2-daterangepicker/index.js' implicitly has an 'any' type. Try npm install @types/angular-2-daterangepickerif it exists or add a new declaration (.d.ts) file containingdeclare module 'angular-2-daterangepicker';ts(7016)

I can not use...

The steps provided to setup development points to this gist
The gist does not exist and return 404.

Problem:
I want to use the datepicker for an Austrian website but if it is only in english I can't use it.

Solution 1:
The best thing would be if I could simply enter "de" for german in the options @input()

Solution 2:
An options field in the options where i can specify all the text elements (This way all languages are possible):

{
  apply: "Apply", 
  cancle: "Cancle",
  clear: "Clear",
  weekdays: {
    monday: "Mo",
    tuesday: "Tu",
    ...
  }
}

Btw:
I forked your repo and tried to implement Solution 2 myself, but i couldn't even install all the dependencies with npm i or npm i --force always got this error:

npm WARN deprecated [email protected]: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
npm ERR! code 1
npm ERR! path /Users/paulkronegger/Downloads/angular-components/node_modules/node-sass
npm ERR! command failed
npm ERR! command sh -c -- node scripts/build.js
npm ERR! Building: /opt/homebrew/Cellar/node@16/16.18.1/bin/node /Users/paulkronegger/Downloads/angular-components/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli   '/opt/homebrew/Cellar/node@16/16.18.1/bin/node',
npm ERR! gyp verb cli   '/Users/paulkronegger/Downloads/angular-components/node_modules/node-gyp/bin/node-gyp.js',
npm ERR! gyp verb cli   'rebuild',
npm ERR! gyp verb cli   '--verbose',
npm ERR! gyp verb cli   '--libsass_ext=',
npm ERR! gyp verb cli   '--libsass_cflags=',
npm ERR! gyp verb cli   '--libsass_ldflags=',
npm ERR! gyp verb cli   '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | darwin | arm64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb `which` failed Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (/Users/paulkronegger/Downloads/angular-components/node_modules/which/which.js:13:12)
npm ERR! gyp verb `which` failed     at F (/Users/paulkronegger/Downloads/angular-components/node_modules/which/which.js:68:19)
npm ERR! gyp verb `which` failed     at E (/Users/paulkronegger/Downloads/angular-components/node_modules/which/which.js:80:29)
npm ERR! gyp verb `which` failed     at /Users/paulkronegger/Downloads/angular-components/node_modules/which/which.js:89:16
npm ERR! gyp verb `which` failed     at /Users/paulkronegger/Downloads/angular-components/node_modules/isexe/index.js:42:5
npm ERR! gyp verb `which` failed     at /Users/paulkronegger/Downloads/angular-components/node_modules/isexe/mode.js:8:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:202:21)
npm ERR! gyp verb `which` failed  python2 Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (/Users/paulkronegger/Downloads/angular-components/node_modules/which/which.js:13:12)
npm ERR! gyp verb `which` failed     at F (/Users/paulkronegger/Downloads/angular-components/node_modules/which/which.js:68:19)
npm ERR! gyp verb `which` failed     at E (/Users/paulkronegger/Downloads/angular-components/node_modules/which/which.js:80:29)
npm ERR! gyp verb `which` failed     at /Users/paulkronegger/Downloads/angular-components/node_modules/which/which.js:89:16
npm ERR! gyp verb `which` failed     at /Users/paulkronegger/Downloads/angular-components/node_modules/isexe/index.js:42:5
npm ERR! gyp verb `which` failed     at /Users/paulkronegger/Downloads/angular-components/node_modules/isexe/mode.js:8:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:202:21) {
npm ERR! gyp verb `which` failed   code: 'ENOENT'
npm ERR! gyp verb `which` failed }
npm ERR! gyp verb check python checking for Python executable "python" in the PATH
npm ERR! gyp verb `which` succeeded python /Users/paulkronegger/micromamba/bin/python
npm ERR! gyp ERR! configure error 
npm ERR! gyp ERR! stack Error: Command failed: /Users/paulkronegger/micromamba/bin/python -c import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack   File "<string>", line 1
npm ERR! gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack                       ^
npm ERR! gyp ERR! stack SyntaxError: invalid syntax
npm ERR! gyp ERR! stack 
npm ERR! gyp ERR! stack     at ChildProcess.exithandler (node:child_process:402:12)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:513:28)
npm ERR! gyp ERR! stack     at maybeClose (node:internal/child_process:1100:16)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:304:5)
npm ERR! gyp ERR! System Darwin 21.6.0
npm ERR! gyp ERR! command "/opt/homebrew/Cellar/node@16/16.18.1/bin/node" "/Users/paulkronegger/Downloads/angular-components/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd /Users/paulkronegger/Downloads/angular-components/node_modules/node-sass
npm ERR! gyp ERR! node -v v16.18.1
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok 
npm ERR! Build failed with error code: 1

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/paulkronegger/.npm/_logs/2022-11-17T19_57_28_988Z-debug-0.log

Describe the bug

When the "app-datetimepicker" is added inside a form e.g.,

`<form (ngSubmit)="formCreate(formValue)" #formValue="ngForm">

Submit

, the calendar's next/previous button triggers the submit form button - when using a template-driven approach.

I think the problem can be solved if the next/previous button has the attribute "type="button". By default it gets the "submit" type when a type is not informed.

VM44162:865 Uncaught Error: moduleId should be a string in "DaterangepickerComponent". See https://goo.gl/wIDDiL for more information.

This is the error I get when I try to include your module. First I had to fix a Unexpected character '@' error but after that got fixed I get the one above. According to what I was able to find online the problem is that WebPack spits out the number for module.id but Angular needs a string. I'm not sure what to do about it =)

Hello Everyone,
I have used npm angular-2-daterangepicke and follow steps that are given here (https://www.npmjs.com/package/angular-2-daterangepicker). This date range picker is working fine in my local machine but while making build for the production it gives some error as given below.

ERROR in: Unexpected value 'DaterangepickerModule in C:/xxx/node_modules/angular-2-daterangepicker/index.js' imported by the module 'AppModule in C:/xxx/src/app/app.module.ts'. Please add a @NgModule annotation.

In app.module.ts I have code like this.

import { DaterangepickerModule } from 'angular-2-daterangepicker';
@NgModule({
declarations: [],
imports: [
DaterangepickerModule
]
})
export class AppModule { }

If there is someone who can solve this problem then please help me to find out the solution to this problem.

I have got some temporary solution on GitHub for making a build, by searching for the solution of the same problem i.e. (ng build --prod --aot=false --build-optimizer=false) but I think it is not the right way to create a build.