Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/moots-technology/moots-datetime-picker
A beautiful easy to use Ionic date and time picker
https://github.com/moots-technology/moots-datetime-picker
android angular calendar clock datepicker datetimepicker ionic ios timepicker
Last synced: 29 days ago
JSON representation
A beautiful easy to use Ionic date and time picker
- Host: GitHub
- URL: https://github.com/moots-technology/moots-datetime-picker
- Owner: moots-technology
- License: mit
- Created: 2020-02-14T12:50:12.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-02-04T07:00:27.000Z (almost 2 years ago)
- Last Synced: 2024-04-25T23:04:32.168Z (8 months ago)
- Topics: android, angular, calendar, clock, datepicker, datetimepicker, ionic, ios, timepicker
- Language: TypeScript
- Homepage:
- Size: 9.4 MB
- Stars: 13
- Watchers: 3
- Forks: 1
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Moots Datetime Picker
The most intuitive and beautiful date & time picker for ionic. Moots datetime picker allows you to set single dates or date ranges in an easy and intuitive way. It features a calendar and clock picker with support for 12 and 24 hour mode. Choose your desired date with the help of our beautiful and easy-to-use interface. Dark mode supported.
# Versions
| Datetime Picker-Version | Angular-Version |
|---|---|
| <=0.2.9 | Angular 8 |
| >=0.3.0 | Angular 12 |
# Live Demo
Please find a live demo on [Stackblitz](https://moots-picker-demo.stackblitz.io)
Notes:
- Certain features might not work properly on stackblitz - but work in a real project
- The clock picker is optimised for touch control, thus set your view to a mobile device
# Install
Dependencies:
`npm i luxon @angular/cdk @angular/flex-layout @angular/animations`
The picker:
`npm i moots-datetime-picker`
# Note about time zones
The picker is time zone agnostic. All input is expected to be in UTC, all calculations are done without regard to user time zone and locale, and all output is in UTC. When you select a certain date and time on the picker, you will get that displayed date and time in UTC format. Any locale specific transformations must happen outside of the picker.
# Usage
Import the `MootsPickerModule` and dependencies in your `AppModule`:
```ts
@NgModule({
...
imports: [
IonicModule.forRoot(MyApp),
FlexLayoutModule,
BrowserAnimationsModule,
MootsPickerModule
],
...
})
export class AppModule {}
```
Please find below an example as a quick start guide to get the picker running.
## Modal
```ts
export class DemoModalBasicComponent {
date = new DateTime();
dateRange = {
from: this.date.valueOf(),
to: this.date.valueOf()
};
myCalendar;
constructor(public modalCtrl: ModalController) {}
async openCalendar() {
const options: PickerModalOptions = {
pickMode: PickMode.RANGE,
title: 'RANGE',
defaultDateRange: this.dateRange,
weekStart: 1,
step: 4,
locale: 'de'
};
this.myCalendar = await this.modalCtrl.create({
component: PickerModal,
componentProps: { options }
});
this.myCalendar.present();
const event: any = await this.myCalendar.onDidDismiss();
const { data: date, role } = event;
if (role === 'done') {
const startDate = DateTime.fromMillis(event.data.from, { zone: 'Etc/UTC' });
const endDate = DateTime.fromMillis(event.data.to, { zone: 'Etc/UTC' });
console.log(startDate);
console.log(endDate);
}
console.log('role', role);
}
}
```
## Component
Coming soon!
# Development Notes
To release a new version, commit all your changes and run:
- `npm version patch` to increment the version
- `npm run packagr` to build the library package
- `npm publish dist` to pubish it to npmjs
# About
[moots technology](https://mootstech.com.au) is an Adelaide, South Australia based consultancy and software development company with a huge expertise in usage requirements analysis and cloud architecture frameworks for creating modern software solutions. Hereby we prioritise high usability and amazing UX over adding further features.