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

Markdown is supported
Copy & paste or drag & drop images (max 30 MB per image)
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.

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • User Avatar
    0
    gconey created

    Hi,

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

    Regards, George

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • User Avatar
    0
    alper created
    Support Team

    see this component

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

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • 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.

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • 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!

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • 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.

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • 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)
    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • 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.

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • 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>.

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • User Avatar
    0
    ivanberin created

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

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • 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.
    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
Assignee
No one
Labels
None yet