aavanzyl / ngx-tiny Goto Github PK

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:

1. installed npm packages as required
2. setup everything as described in docs
3. Click on datepicker input field
4. Click on title
5. See error

Screenshot

Expected behavior
The overlay toggles between the year and months selection.

Versions (please complete the following information):

• OS: macOS Mojave
• Browser: Chrome 84.0.4147.135
• Package Version [e.g. 1.2.3]: 8.0.6 (tried ^8.0.0)
• Angular Version [e.g. 7.x]: 10

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:

1. installed npm packages as required
2. setup everything as described in docs
3. Use different locale (for example: de)

		datePickerOptions = {
			locale: deLocale
		}

4. Click on datepicker input field
5. See error

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):

• OS: macOS Mojave
• Browser: Chrome 84.0.4147.135
• Package Version [e.g. 1.2.3]: 8.0.6 (tried ^8.0.0)
• Angular Version [e.g. 7.x]: 10

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.

Screenshots

Versions (please complete the following information):

• OS: Windows 10 Pro
• Browser Chrome
• Package Version 10.0.2
• Angular Version 11.1.0

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:

1. Build the application with the optimization: true in angular.json configuration
2. Serve the dist folder with http-server
3. Open date-picker and select some date
4. After you selected the date open the date-picker again
5. The date that you have chosen should have red (default) background but it does not

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);
}

}
`

`

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):

• OS: Windows 10
• Browser: chrome Version 90.0.4430.93 (Official Build) (64-bit)

Please see here: #9

I tried everything on my own.

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:

1. installed npm packages as required
2. setup everything as described in docs
3. Click on datepicker input field
4. click on prev or next month buttons
5. See error

Expected behavior
The overlay switches to the previous or next month.

Versions (please complete the following information):

• OS: macOS Mojave
• Browser: Chrome 84.0.4147.135
• Package Version [e.g. 1.2.3]: 8.0.6 (tried ^8.0.0)
• Angular Version [e.g. 7.x]: 10

Additional context
It's working in your examples 🤷‍♂️