Base solution for your next web application
Open Closed

Date & Time Picker #3574

User avatar
0
gconey created

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

Go to accepted answer
11 Answer(s)
  • User Avatar
    0
    ismcagdas created
    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.

  • User Avatar
    0
    gconey created

    Hi,

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

    Regards, George

  • User Avatar
    0
    alper created
    Support Team

    see this component

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

  • User Avatar
    0
    ismcagdas created
    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.

  • User Avatar
    0
    zokho created

    <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!

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @zokho,

    You can try it like this:

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

    Thanks.

  • User Avatar
    0
    ivanberin created

    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)
  • User Avatar
    0
    ivanberin created

    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.

  • User Avatar
    0
    ismcagdas created
    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>.

  • User Avatar
    0
    ivanberin created

    By the way, if I want to contribute, how do I make a pull request on the private repository?

  • User Avatar
    0
    aaron created
    Support Team

    how do I make a pull request on the private repository?

    1. Create a fork of the project on GitHub.
    2. Push your work to your fork.
    3. Create the Pull Request from the branch in your fork.
Assignee
No one
Labels
None yet