kesarion / angular2-air-datepicker Goto Github PK
View Code? Open in Web Editor NEWAngular2 Datepicker | Native implementation of air-datepicker
Home Page: http://t1m0n.name/air-datepicker/docs/
License: MIT License
Angular2 Datepicker | Native implementation of air-datepicker
Home Page: http://t1m0n.name/air-datepicker/docs/
License: MIT License
Hello! Can you add new language (russian). I need to add the follow code to language library:
['ru', new AirLanguage(
['Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота', 'Воскресенье'],
['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'],
['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь']
)] as [string, AirLanguage],
?
@kesarion when date comes from server and it set from component it set day before correct day
template:
<div class="form-element position-relative">
<label for="dateOfBirth">Дата рождения</label>
<input type="text" id="dateOfBirth" class="birthday" name="DateOfBirth" readonly placeholder="ДД.ММ.ГГГГ"
formControlName="dateOfBirth" (focus)="datePickerIsActive = true" (blur)="datePickerIsActive = false">
<air-datepicker class="air-datepicker" [airOptions]="datePickerOption" [(airDate)]="datePickerDate"
(airChange)="dateChanged($event)" [ngClass]="{'air-datepicker-active': datePickerIsActive}" tabindex="100"
(focus)="datePickerIsActive = true" (blur)="datePickerIsActive = false">
</air-datepicker>
</div>
Component:
datePickerOption: object;
datePickerDate: Date;
ngOnInit(): void {
const { day, month, year } = { day: 31, month: 8, year: 2020 };
this.setOptiontsToDatePicker();
this.datePickerDate = new Date(year, month - 1, day);
}
private setOptiontsToDatePicker() {
const minusFiftyYears = (date: Date): Date => new Date(date.getFullYear() - 50, date.getMonth(), date.getDate());
const now = new Date(Date.now());
const fiftyYearsBefore = minusFiftyYears(now);
const hundredYearsBefore = minusFiftyYears(fiftyYearsBefore);
this.datePickerOption = {
language: 'ru',
enabledDateRanges: [
{ start: fiftyYearsBefore, end: now },
{ start: hundredYearsBefore, end: fiftyYearsBefore }
]
};
}
An issue to track the month/year picker feature.
Hello, @kesarion. I have found an issue in your package. If i select the day of month, for example it will be 31 January, and click the 'next month' button ' it shows me an error: "./AirDatepicker class AirDatepicker - inline template:11:12 caused by: Cannot set property 'selected' of undefined".
The reason why this is happening: Your package try to mark 'selected' day which is not exist in the next month. February doesn't contain 31 days. You should fix it by adding a condition.
@kesarion I hope this issue can be easily resolved. The issue is when I bind AirDate with any date that is not in current month and opening the calendar doesn't display that particular date pre-selected which it does if the selected date is in current month. However if I navigate to that calendar month, I can see that showing selected.
Currently, the picker is already visible on the page. Is there a config that makes this behave like a dropdown?
How to reproduce:
Hi, I need to set "minDate = new Date()" but, is it implemented? I don't find how to set it.
if [(airDate)]="date" is missing as a attribute you get the following error message
Cannot read property 'getFullYear' of undefined
Maybe add a simpler error message
An issue to track the range selection feature.
I get the error ERROR in AirDatepicker is not an NgModule when I try to run ng build
---These are my package json depencies---
"dependencies": {
"@angular/animations": "^4.0.3",
"@angular/cli": "^1.0.0",
"@angular/common": "~4.0.0",
"@angular/compiler": "~4.0.0",
"@angular/core": "~4.0.0",
"@angular/forms": "~4.0.0",
"@angular/http": "~4.0.0",
"@angular/material": "^2.0.0-beta.2",
"@angular/platform-browser": "~4.0.0",
"@angular/platform-browser-dynamic": "~4.0.0",
"@angular/router": "~4.0.0",
"angular2-air-datepicker": "^0.1.2",
}
---I declared the Module in typings.d.ts---
declare module 'angular2-air-datepicker';
--And Loaded it In mY app.module--
import { AirDatepicker } from 'angular2-air-datepicker';
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
BrowserAnimationsModule,
HttpModule,
routing,
AirDatepicker,
],
I get this Error ..
ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'daysMin' of undefined
When I try to load my app after i included airdatepicker to my html
----HTML---
<air-datepicker [airOptions]="{ timepicker: true, format12h: true }" [(airDate)]="date"
(airChange)="onDateChanged($event)"></air-datepicker>
---COMPONENT----
public date: Date = new Date;
onDateChanged(event:any) {
console.log(event);
}
Hello, I populate enabledDateRanges and draw a calendar. Then I remove some date from enabledDateRanges and want to redraw the calendar. How can I achieve that?
Dear Kesarion,
I tried sending a pull request, but I could not.
I made a change in your code so that when we select the month or year the event (airChange) is triggered.
Tks
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.