technikhil314 / angular-components Goto Github PK
View Code? Open in Web Editor NEWCollection of all my open source angular components
Home Page: https://github.com/technikhil314/angular-components
License: MIT License
Collection of all my open source angular components
Home Page: https://github.com/technikhil314/angular-components
License: MIT License
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
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)
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:
__ footnote:
Very useful module, thank you sir :)
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, ...
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 =)
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.
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.
`
`
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
.
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.
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.
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.
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.
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!
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.
If fromDate is undefined: this.fromDate.format is not a function
.
Missing condition in if statement.
Describe the bug
00d928a
This commit is not included on the npmjs.org build
Expected behavior
The commit should be included
Describe the bug
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
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):
Smartphone (please complete the following information):
Additional context
Add any other context about the problem here.
The steps provided to setup development points to this gist
The gist does not exist and return 404.
Is there any problem?
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 ?
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
dates are not clickable and not updated in view
Are you working on this? The files changed were around 4 months back.
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 @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:
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
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:
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
I think many users use this daterangepicker for reservation, booking something, so it would be nice to add a feature for disabling specific dates.
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
"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?
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.
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)
Hi, How to use one calendar for select start date and end date?
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.
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.
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:
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):
Additional context
Using angular version 14.1
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:
ng serve --prod true
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.
Please impliment Clear button.now i am not able to clear
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 containing
declare module 'angular-2-daterangepicker';ts(7016)
I can not use...
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)
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
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.
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.
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.
ngSubmit fires form submission on apply, cancel and other buttons without type="button"
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.