aavanzyl / ngx-tiny Goto Github PK
View Code? Open in Web Editor NEWImplementation of Light Weight Angular Components for Production Applications
Home Page: https://aavanzyl.github.io/ngx-tiny
License: MIT License
Implementation of Light Weight Angular Components for Production Applications
Home Page: https://aavanzyl.github.io/ngx-tiny
License: MIT License
I was trying to debug this on my side but it seems that (valueChange) gets emitted twice.
looking at the website documentation and running the live example there, I see it also gets triggered twice:
// https://aavanzyl.github.io/ngx-tiny/project/date-picker
Wed Jan 08 2020 00:00:00 GMT-0500 (Eastern Standard Time)
Wed Jan 08 2020 00:00:00 GMT-0500 (Eastern Standard Time)
Sat Jan 11 2020 00:00:00 GMT-0500 (Eastern Standard Time)
Sat Jan 11 2020 00:00:00 GMT-0500 (Eastern Standard Time)
is this a side effect of something else? can this be avoided at all?
Describe the bug
If I click on the title bar of the overlay, I get the javascript error:
Cannot read property 'nativeElement' of undefined
To Reproduce
Steps to reproduce the behavior:
Expected behavior
The overlay toggles between the year and months selection.
Versions (please complete the following information):
Additional context
I tried this on your examples (https://aavanzyl.github.io/ngx-tiny/project/date-picker, Angular Forms - Single Date) and there it happens sometimes, too.
Is your feature request related to a problem? Please describe.
I'm struggling to get the tiny picker to select only month and year, with a min/max value.
Is there a way to achieve this with the current code?
Describe the solution you'd like
Would love to supply some configuration to allow only month and year picking with some min/max limits.
Additional context
A customization like this: https://stackoverflow.com/questions/51200121/ngx-bootstrap-datepicker-option-to-pick-only-month-and-a-year
Describe the bug
Can't get options minDate
and maxDate
To Reproduce
specify minDate
and maxDate
on options
Expected behavior
the date that later than maxDate
should be disabled
after some investigation looks like a bug on function
isDateSelectable(date: Date)
Describe the bug
If I use a different locale, I'm expecting the days of the week (Mo-Su) to be translated.
To Reproduce
Steps to reproduce the behavior:
de
) datePickerOptions = {
locale: deLocale
}
Expected behavior
The overlay uses localized translations for the days. Example de (German):
Mo = Mo
Tu = Di
We = Mi
Th = Do
Fr = Fr
Sa = Sa
Su = So
Versions (please complete the following information):
I'm using this in a hybrid app that's available on smartphones and on the web. I think the UI could work well on smartphones if the buttons were larger. I've hacked it this way:
// date-picker.scss
.ngx-date-picker-calendar-container{
width: 450px !important;
max-width: 100vw;
.day-unit,
.month-unit,
.year-unit{
font-size: 1rem;
height: 3rem;
}
}
I haven't done extensive testing on the time picker but I imagine I would write similar rules.
would it be possible to expose a sass variable that increases the scale of buttons?
Both in the online example and in my code the calendar disappears when selecting different dates multiple times. It's not a CSS issue, the element is removed from DOM completely.
To Reproduce
Select some date and then another one in the last demo example.
Expected behavior
Inline calendar should stay displayed always. When single selection date is set, the displayed date should switch to selected. If range selection is set, the expected behavior remains unchanged.
Versions (please complete the following information):
I have a multipage Ionic app. let's just call them page A and page B
page A imports a module that imports a few other packages, including ngx-date-picker. if I load the app starting on page A, everything works as expected.
page B doesn't load that module. if I load the app starting on page B then navigate to page A, it throws the following error: 'ngx-date-picker' is not a known element
. it's funny because it doesn't complain about any of the other modules that page A loads that page B doesn't.
page A also imports ngx-time-picker but there are no errors on that (although, it might be halting execution after the date-picker error).
any thoughts on what is going on? any fixes beyond importing ngx-date-picker at the root?
I'm not sure if I'm doing this correctly but I don't think {closeOnSelection: false}
is working. I also pass it {includeDays: 'none'}
and that works as expected. However, with closeOnSelection, the popup closes as soon as I click on a date.
for what it's worth, I'm using this inside of an Ionic project.
<ngx-date-picker
#date
[options]="{closeOnSelection: false, includeDays: 'none'}">
</ngx-date-picker>
<input
[formControlName]='name'
[ngxDatePicker]='date'
[placeholder]='placeholder | translate'
readonly
/>
Describe the bug
I'm using date-picker component, version 10.0.2. When date-picker has some value selected the selected day background should have red color. For example if current value is 01/27/2021, when I open date-picker number 27 should have red background. This works fine when I start the app in development mode, but when it's build for production with optimization option set to true number 27 does not have any background.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Selected day of the selected date should have red background if the app is build for production.
This is my angular configuration:
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
},
Hello,
I can't get the library to recognize my locale in Spanish. It takes the default option which is the name of the months and days in English.
My code is the following:
`import { Component, OnInit } from '@angular/core';
import { DatePickerOptions, NgxDatePickerComponent } from '@ngx-tiny/date-picker';
import { environment } from '../../../environments/environment';
import { es } from 'date-fns/locale'
@component({
selector: 'app-componentes',
templateUrl: './componentes.component.html',
styleUrls: ['./componentes.component.css']
})
export class ComponentesComponent implements OnInit {
singleDate: Date = new Date();
dateInstanceSingle: NgxDatePickerComponent;
datePickerOptions: DatePickerOptions = {
locale: es,
displayFormat: 'dd/MM/yyyy',
barTitleFormat: 'MMMM yyyy',
firstCalendarDay: 1
};
constructor() { }
ngOnInit(): void {
}
onChangeSingle(value: Date): void {
this.singleDate = value;
console.log(this.singleDate);
}
}
`
`
Componentes
<input class="form-control" placeholder="Select date" [ngxDatePicker]="dateInstanceSingle" [value]="singleDate" (valueChange)="onChangeSingle($event)">
<ngx-date-picker #dateInstanceSingle [options]="datePickerOptions">
Hello, I'm not sure if this is a bug or feature request, but I noticed (after jumping into development), that the examples in the docs do not display the initial date value inside the tag that was set in the TypeScript (looking at the single date example for instance). I am doing reactive forms where initial or asynchronous values will need to be set programmatically and displayed, and not all values will be set with the datepicker itself. Is this intentionally set up this way with this functionality unwanted, or perhaps I've made a mistake and this functionality is currently possible (user error). I am able to use the date picker successfully with my form otherwise for dates that I set manually. Thanks!
https://aavanzyl.github.io/ngx-tiny/project/date-picker
Usage tab
Can you add the locale for months label.
Describe the bug
ngx-tiny/date-picker @10.0.2
angular @12.0.3
storybook @6.3
When using date input with datepicker, initializing input with 'null' value triggers angular "required"
error state upon entering in a valid date. Error goes away upon re-entering the same date or another valid date.
export const datepickerCtrl = new FormControl(null, [
VUI_VALIDATORS.date('M/D/YYYY'),
Validators.required
]);
replacing null
with new Date()
removes this behavior, but desired behavior would be to be able to initialize the input as blank.
Versions (please complete the following information):
Please see here: #9
for days that are in the current month, there are variables to change the foreground color on hover. this is useful if my hover background is a dark color and I need to switch the foreground to a light color.
however, there's no way to style the foreground color on hover for days that are not in the current months. by these, I mean the dates that would excluded if {includeDays: 'none'}
. however, these days are still affected by the hover background. so I get dark on dark colors.
https://aavanzyl.github.io/ngx-tiny/project/date-picker says:
To install this library, run:
npm install @ngx-tiny/ngx-date-picker --save
That produces a 404. The correct command line is
npm install @ngx-tiny/date-picker --save
Describe the bug
If I click the "prev month" or "next month" buttons, the datepicker overlay just closes.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
The overlay switches to the previous or next month.
Versions (please complete the following information):
Additional context
It's working in your examples ๐คทโโ๏ธ
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.