Moment.js adapter for https://github.com/danielmoncada/date-time-picker

License: MIT License

JavaScript 12.25% TypeScript 83.89% HTML 3.51% SCSS 0.34%

angular moment momentjs timepicker datepicker date-time-picker

date-time-picker-moment-adapter's Introduction

Angular Date Time Picker (MomentJs Adapter)

Angular date time picker - MomentJs Adpater

** This package supports Angular 17 **

Breaking Changes

Version 4.x.x >= no longer supports ng 16 - 13. If you need ng 16-13 support, stick with version 3.x.x.
Version 2.x.x no longer supports <= ng 13. If you need View Engine support, stick with version 1.x.x.

Description

This is a MomentJs adapter to be used with the following date time picker control:

https://github.com/danielmoncada/date-time-picker

How to Use

Install with npm:npm install @danielmoncada/angular-datetime-picker-moment-adapter --save

import { NgModule } from '@angular/core';
import { OwlDateTimeModule, OWL_DATE_TIME_FORMATS} from '@danielmoncada/angular-datetime-picker;
import { OwlMomentDateTimeModule } from '@danielmoncada/angular-datetime-picker-moment-adapter';

// See the Moment.js docs for the meaning of these formats:
// https://momentjs.com/docs/#/displaying/format/
export const MY_MOMENT_FORMATS = {
    parseInput: 'l LT',
    fullPickerInput: 'l LT',
    datePickerInput: 'l',
    timePickerInput: 'LT',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
};

@NgModule({
    imports: [OwlDateTimeModule, OwlMomentDateTimeModule],
    providers: [
        {provide: OWL_DATE_TIME_FORMATS, useValue: MY_MOMENT_FORMATS},
    ],
})
export class AppExampleModule {
}

Dependencies

moment
@danielmoncada/angular-datetime-picker
tslib

Demo

Online doc is here and here
Online demos (StackBlitz) are here and here

License

License: MIT

Author

Maintained and updated by Daniel Moncada, original implementatiom by Daniel Pan

date-time-picker-moment-adapter's People

Contributors

Stargazers

Watchers

Forkers

poferro salimchemes pedro-pv pavlikxor khajegan fincrm duxor

date-time-picker-moment-adapter's Issues

Focus Issue when used in Modal popup

i'm using the version 16.1.0 , so i have a form in modal popup and when used the date time picker in modal popup i'm not able to input the time, the focus is not being set to the time input and when click on it it always set focus on the first input field in modal popup.
i can only set the time by clicking on the arrows

Upgrade for angular 17 and dependency review

Hi :),

Is it possible to upgrade the dependencies to support angular 17?
In the meantime this module has dependencies declared for @angular/common and @angular/core and @angular/cdk are these necessary? The only explicit dependency I see in code is of @angular/core. Am I missing something?

Thanks and congrats for keeping this nice component alive :).
POFerro

Need to update with Ivy engine

We are getting warnings when trying to build an angular App.

Generating browser application bundles (phase: setup)...Processing legacy "View Engine" libraries:

@danielmoncada/angular-datetime-picker-moment-adapter [es2015/esm2015] (https://github.com/danielmoncada/date-time-picker-moment-adapter.git)
Encourage the library authors to publish an Ivy distribution.

Angular: 13.3.11
angular-datetime-picker:14.1.0
angular-datetime-picker-moment-adapter:1.1.0

Validation is to fast.

Hi Daniel Moncada,
I have a validation bug, as seen in the screenshot; when the end time is lower than the start time, the validation instantly changes the start time to the end time input. For instance I have 11:15 as start time and want to type with keyboard 15:15 for end time, the start time jumps to 01 because the "1" of "15" is lower than 11.

I think in the past with angular 7 I didn't have this issue, but when I have upgraded to angular 12 this happens. How can I delay the input validation? Or how can I solve this issue?

I'm using the current packages:
@angular/animations": "~12.2.14",
"@angular/cdk": "^12.2.13",
"@danielmoncada/angular-datetime-picker": "^13.1.1",
"@danielmoncada/angular-datetime-picker-moment-adapter": "^1.1.0",

code:
<owl-date-time
#dtPickerRef
[pickerType]="'timer'"
[hour12Timer] = false
[stepMinute]="15"

OWL_DATE_TIME_FORMATS not working on angular 13

I'm setting OWL_DATE_TIME_FORMATS with { provide: OWL_DATE_TIME_LOCALE, useValue: 'vi-VN' } but it not working
I try your demo https://stackblitz.com/edit/angular-ae6mv3?file=app%2Fapp.module.ts but it only run on angular 5.
How can i fix this.

Thanks you

Add OWL_MOMENT_DATE_TIME_ADAPTER_OPTIONS to public_api

Can we add OWL_MOMENT_DATE_TIME_ADAPTER_OPTIONS injection token to the list of exports in public_api? Currently there doesn't seem to be a way for me to import the injection token so I can set the useUtc option for the adapter.

Cannot read properties of null reading clampDate at set pickerMoment [as pickerMoment]

Hi,

Error message:
Cannot read properties of null reading clampDate at set pickerMoment [as pickerMoment]

This issue raised on Angular 16 standalone dialog form component for Full-calendar implementation.

Here is the component decorator:

@component({
selector: 'app-form-dialog:not(o)',
templateUrl: './form-dialog.component.html',
standalone: true,
imports: [ CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatSelectModule, MatIconModule, OwlDateTimeModule, OwlNativeDateTimeModule ],
providers: [CalendarService]
})

Some used packages versions:

"@angular/animations": "16.0.3",
"@angular/cdk": "16.0.2",
"@angular/common": "16.0.3",
"@angular/compiler": "16.0.3",
"@angular/core": "16.0.3",
"@angular/flex-layout": "15.0.0-beta.42",
"@angular/forms": "16.0.3",
"@angular/material": "16.0.2",
"@angular/material-luxon-adapter": "16.0.2",
"@angular/platform-browser": "16.0.3",
"@angular/platform-browser-dynamic": "16.0.3",
"@angular/router": "16.0.3",

"@danielmoncada/angular-datetime-picker": "^16.0.1",
"@fullcalendar/angular": "^6.1.9",
"@fullcalendar/core": "^6.1.9",
"@fullcalendar/daygrid": "^6.1.9",
"@fullcalendar/interaction": "^6.1.9",
"@fullcalendar/list": "^6.1.9",
"@fullcalendar/timegrid": "^6.1.9",

Export MomentDateTimeAdapter

MomentDateTimeAdapter should be exported in public-api.ts.

danielmoncada / date-time-picker-moment-adapter Goto Github PK