Date & Time Picker #3574 | Support Center

gconey created 7 years ago

Hi,

Has anyone found a date and time picker that works well in the Angular 1.x ver of the Framwork, including handling different timezones, utc, etc. I have been using the one from Angular Strap <a class="postlink" href="http://mgcrea.github.io/angular-strap/#">http://mgcrea.github.io/angular-strap/#</a> I've more or less got it working and handing the timezones correctly, etc. But it's still causing me quite a few problems and took me a lot of hacking to work in the Framework correctly (issues around timezones, moment, etc, etc). And the user experience isn't all that great. Times and dates are fundamental to my application so if anyone has good suggestions that are working well for them please let me know.

Thanks a lot, George

11 Answer(s)

0

ismcagdas created 7 years ago
Support Team

Hi,

We also couldn't find a good one for native angular1, so we wrote a directive for a jquery plugin. You can follow the same approach if you like.

Thanks.
0

gconey created 7 years ago

Hi,

Can you share your component or point me in the right direction? Thanks.

Regards, George
0

alper created 7 years ago
Support Team

see this component

aspnet-zero-core\angular\src\app\shared\common\timing\date-picker.component.ts
0

ismcagdas created 7 years ago
Support Team

Hi @gconey,

What @alper shared is for angular2. I also made I mistake, I was thinking of angular 2 as well.

In angular1, we have used this one <a class="postlink" href="https://github.com/aspnetzero/aspnet-zero/blob/master/src/MyCompanyName.AbpZeroTemplate.Web/libs/angular-daterangepicker/angular-daterangepicker.js">https://github.com/aspnetzero/aspnet-ze ... epicker.js</a>.

There is one datetimepicker for angularJs here <a class="postlink" href="https://github.com/dalelotts/angular-bootstrap-datetimepicker">https://github.com/dalelotts/angular-bo ... timepicker</a>. You can give it a try, I have used it's jQuery version before and it was nice.

Thanks.
0

zokho created 7 years ago

<cite>alper: </cite> see this component

aspnet-zero-core\angular\src\app\shared\common\timing\date-picker.component.ts

Hey alper, Would you be able give me a sample of how to use the DatePickerComponent in a form? I can see that it has already been imported and exported in the AppCommonModule. But did see that it has ever been used!

ismcagdas created 7 years ago

Support Team

Hi @zokho,

You can try it like this:

<input datePicker type="datetime" name="MyDateTime" class="form-control" [(selectedDate)]="entity.creationDate">

Thanks.

0
ivanberin created 7 years ago
I tried the above code on one of my components, but get the following error:

$element.datepicker is not a function at DatePickerDirective.ngAfterViewInit (date-picker.component.ts:38)

ivanberin created 7 years ago

This is definitely a bug in date-picker.component.ts

I changed the ngAfterViewInit() to the following:

ngAfterViewInit(): void {

        const $element = $(this.hostElement.nativeElement);
        $element.datetimepicker({
            locale: abp.localization.currentLanguage.name,
            format: 'L'
        }).on('changeDate', e => {
            this.selectedDate = moment(e.date);
        }).on('clearDate', e => {
            this.selectedDate = null;
        });
    }

Now it works.

0

ismcagdas created 7 years ago
Support Team

Thanks @IvanBerin,

We will fix this as well, <a class="postlink" href="https://github.com/aspnetzero/aspnet-zero-core/issues/647">https://github.com/aspnetzero/aspnet-ze ... issues/647</a>.
0

ivanberin created 7 years ago

By the way, if I want to contribute, how do I make a pull request on the private repository?
0
aaron created 7 years ago
Support Team
how do I make a pull request on the private repository?

Create a fork of the project on GitHub.

Push your work to your fork.

Create the Pull Request from the branch in your fork.

Have an answer to this question? Log in and write your answer.