Base solution for your next web application
Open Closed

Use datetimePicker in angular #10839


User avatar
0
najeebalmajeedy created

Prerequisites

Please answer the following questions before submitting an issue. YOU MAY DELETE THE PREREQUISITES SECTION.

  • What is your product version? 10.5.0
  • What is your product type (Angular or MVC)? Angular
  • What is product framework type (.net framework or .net core)? .net core

If issue related with ABP Framework

  • What is ABP Framework version?

If issue is about UI

  • Which theme are you using? Default
  • What are the theme settings? Default

How can I use datetimepicker to select date and time and store in one field in Create/Edit modal?


10 Answer(s)
  • User Avatar
    0
    BobIngham created

    Hi Guys,

    I have a similar question, see Datetime format in Date picker.

    I have the following code in my own module which imports the AppCommon module;

    The AppCommon module has the the date picker module declared as a provider:

    Yet, when I attempt to use the date picker in my reactive form using the following code:

    The first thing I notice is that the date picker displays using US format once a date is selected The subject of my previous post, see above):

    I can save this date to the database correctly but when I next come to edit I have an invalid date message displayed in the input field:

    The component works perfectly when I use the the demo-ui component. What am I missing?

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @bobingham

    This might be related to your module not importing some modules which configure dateapicker locale. We can continue on the main issue you createad for this problem.

    @najeebalmajeedy you can take a look at some of the existing modals (like Tenant Creation Modal) to see the usage.

  • User Avatar
    0
    najeebalmajeedy created

    Hi @ismcagdas Thank you for your response. I've tried to search a similar datetimepicker in the solution, but I couldn't find any form that get the DateTime as input from the user. I'd really appreciate it if you could provide sample usage where datetimepicker is used to get user inputs for date and time.

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    Did you check create-tenant-modal.component.html ? It contains a sample.

  • User Avatar
    0
    najeebalmajeedy created

    Hi ismcagdas,

    Sorry for my late reply. The only datepicker there, is this: <div [hidden]="isUnlimited || !isSubscriptionFieldsVisible" class="form-group" [ngClass]="{ 'has-error': !subscriptionEndDateIsValid() }" > <label for="SubscriptionEndDate">{{ 'SubscriptionEndDate' | localize }}</label> <input id="SubscriptionEndDate" type="text" #SubscriptionEndDateUtc name="SubscriptionEndDateUtc" class="form-control" bsDatepicker datePickerLuxonModifier [(date)]="tenant.subscriptionEndDateUtc" [bsConfig]="{ adaptivePosition: true }" autocomplete="new-password" /> </div>

    The create tenant interface dosn't contain any time picker.

    I guess I didn't explain my requirement well. so I'll try to be more specific. what I want is a time picker where I can get time value from the end user. please check attached photo

    Thank you for your support

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    Sorry, I couldn't understand you at first. You can use https://valor-software.com/ngx-bootstrap/#/components/timepicker?tab=overview for a time picker. This is a different component than datetimepicker.

  • User Avatar
    0
    peja created

    Hi, Sorry for jumping into this topic, but I have same requirement and trying to get timepicker working, but withouth much success.

    Followed all the instrucgtions from the link: https://valor-software.com/ngx-bootstrap/#/components/timepicker?tab=overview but either will get error, or nothing will happen on the screen.

    Do you guys have any sample where it is used successfully? I am at version 11.0.0 and using Angular w .net core

    This is version of timepicker that didn't throw an error but it also does nothing:

    <timepicker ngDefaultControl [ngModelOptions]="{standalone: true}" [(ngModel)]="mytime">blah</timepicker>
    

    I also tried using datepicker with time option enabled, but noticed that it doesn't show time portion also.

    Any help is appreciated

    Thanks, Peja

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @peja

    Adding TimepickerModule to app-shared.module.ts should fix your problem;

  • User Avatar
    1
    peja created

    That was it. Thanks @ismcagdas !

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @najeebalmajeedy

    Could you also try this ?

    @bobingham

    Did you figure out the problem ? This ticket is shifted from its purpose slightly :).