dalelotts/angular-bootstrap-datetimepicker

Native AngularJS datetime picker directive styled by Twitter Bootstrap

simonstewart

@simonstewart

Is there any documentation for different config options? Like showing the date picker in a popup instead of inline?

Luzo Tot

@luzo_tot_twitter

The demo folder is not available: https://github.com/dalelotts/angular-bootstrap-datetimepicker/tree/master/demo

Where is it possible to find examples, or projects using this library?

Luzo Tot

@luzo_tot_twitter

It is really difficult to learn to use the component without examples, just from this documentation

Dale Lotts

@dalelotts

I agree, having examples available would be nice. For now, the documentation is your only source of information, and it has room for improvement also. =) See https://dalelotts.github.io/angular-bootstrap-datetimepicker/components/DlDateTimePickerComponent.html#info and https://dalelotts.github.io/angular-bootstrap-datetimepicker/components/DlDateTimePickerComponent.html#readme

@simonstewart The majority of the documentation is found at https://dalelotts.github.io/angular-bootstrap-datetimepicker . This component does not provide any popup functionality. You are free to choose any popup implementation you like and place this picker inside your popup of choice. This is an intentional design choice to avoid the slew of issues that come from popup implementations.

shirley

@vercha

hello everyone

I'd like to know will bootstrap datetimepicker be self-adaption?

Thanks for any advice & help!

Dale Lotts

@dalelotts

Hey @vercha , I don't really know what that means. Can you explain?

Fabian Bernhard

@fbernhard

Hi there, is there a way to set min/max date? Thanks!

Dale Lotts

@dalelotts

See https://dalelotts.github.io/angular-bootstrap-datetimepicker/components/DlDateTimePickerComponent.html#selectFilter - will this work for you?

Fabian Bernhard

@fbernhard

Thanks, Dale, for the quick answer!

It works nearly perfect. The context of the function call is the context of the button though, so "this" within the "selectFilter" callback is not a pointer to the component class. Will find a way around it.

Great date/time picker!

Balaji Prasad

@balajiprasadb

Hi All,
I'm looking for a component which has the following features -

Date and time selection in one go
Only date selection
Only time selection
Multiple dates selection

Can you please help me finding the same?

prashanth

@prashanth242627_gitlab

hi all,

is there a way to show time dropdown from 8am to 8am present it is showing from 12am to 12pm

Dale Lotts

@dalelotts

@fbernhard Check out .bind See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind

@balajiprasadb this component works for all of your requirements - you will need to do some fancy coding for #4 but I think its possible

Dale Lotts

@dalelotts

@prashanth242627_gitlab Sure, you have two options. The simplest thing would be to specify a selectFilter that simply disables those hours, but the user will still see them - See https://dalelotts.github.io/angular-bootstrap-datetimepicker/components/DlDateTimePickerComponent.html#selectFilter. The second option is to override the HourModelProvider - See https://dalelotts.github.io/angular-bootstrap-datetimepicker/classes/DlHourModelProvider.html

Muhammad Al Faris

@dreamid27

Hi @dalelotts , thank for awesome plugin. just it.

The dalelots datepicker support popup mode ?

Dale Lotts

@dalelotts

Hey @dreamid27, sure. You can embed the date/time picker into any popup you like, for example, use the dropdown from bootstrap or ng-bootstrap dropdown. Using your preferred UI framework for the popup mode means it will work exactly the same as all of the other popup components.

dhiraj007

@dhiraj007

when using bootstrap.min.css is overwriting my angular material css. please help

Dale Lotts

@dalelotts

@dhiraj007 make sure angular material css is listed after bootstrap css.

Myles Bostwick

@cthrax

Is there an equivalent to the angularjs version "beforeRender" in the angular 5+ version? Or at least a good way to set the range that is selectable? I am presently doing a port from angularjs to angular and this is one of the components we've had in use for a few years.

Myles Bostwick

@cthrax

@dalelotts not sure if this is followed closely enough, so thought I would tag you for the above question.

Dale Lotts

@dalelotts

@cthrax I don't always get the notifications, not sure why. Thanks for the tag, it helps! There is something equivalent called the selectFilter - see https://dalelotts.github.io/angular-bootstrap-datetimepicker/components/DlDateTimePickerComponent.html#selectFilter which is called once for every date in the view (rather than one call with all of the dates. It should work the same but if you have any issues, please let me know.

Myles Bostwick

@cthrax

@dalelotts thanks! That should do the trick, I misunderstood what that option was doing and don't have a prototype up and running to play with yet. Thanks for all your efforts on this project and the previous one!

andr3i4o

@andr3i4o

Hi guys, is there an option to disable days before today?

Dale Lotts

@dalelotts

Use selectFilter - see https://dalelotts.github.io/angular-bootstrap-datetimepicker/components/DlDateTimePickerComponent.html#selectFilter which is called once for every date in the view. Just return false for any date prior to today

andr3i4o

@andr3i4o

@dalelotts Thank you for the information!

f3l1xss

@f3l1xss

Hi @dalelotts do we currently have a way to differentiate (change) event due to click at date picker and (change) event due to value Change (ngModel change or due to writeValue)?

Dale Lotts

@dalelotts

@f3l1xss Not explicitly. Can you tell me a bit about your use case?

f3l1xss

@f3l1xss

@dalelotts Thanks for your reply. Basically, I would want user to be able to set the date from query param, for example mywebsite.com?date=2020-02-03&timeslot=5 would preset the date picker value. I do not want this preset to trigger the change event, as I have bound the change event to other functionality (eg: to refresh my dom entity). I have tried setting the datepicker value through the ngModel and writeValue way but found that both still trigger change event. If only theres a difference in the change model triggered by manual click and ngmodel/value change.

Dale Lotts

@dalelotts

@f3l1xss usually in these cases I set the code logic such that I always want the change event to fire. It sounds like root cause might be that there is more than one path to refresh your dom entity. Now you need to know how the value was set and that seems like a code smell to me.

f3l1xss

@f3l1xss

Hi @dalelotts I understand your point. However, think about my query param use case. There could be tons of query parameters and user may or may not provide date among them. I would have to refresh my dom entity regardless of whether or not there is a date query param. Firing change event upon ngmodel change would thus redundantly refresh the dom twice.

From my experience with another 3rd party angular directive, there would usually be two separate events handling user interaction and modelChange as they are indeed two different events. If there is solution you have in mind albeit a 'hacky' one, please let me know

Dale Lotts

@dalelotts

@f3l1xss nothing comes to mind. Feel free to submit a PR for the additional event.

f3l1xss

@f3l1xss

@dalelotts Thank you for your prompt response, I'll submit a pr when I have the time

Dale Lotts

@dalelotts

Hey @amchidorian I saw a question come through from you, but I don't see it now. Did you get an answer?

amchidorian

@amchidorian

Hello @dalelotts ! I was wondering how to use the 'classes' attribute of the right and left button, but i finally found out.
But I may have another question, I'm a pretty new Angular user and i'm not quite sure how to use the "set value" accessor of the DlDateTimePickerComponent in order to preselectionned a date

amchidorian

@amchidorian

Well looks like i finally found out ! And btw your datepicker is awesome !

cajaykumar

@cajaykumar

Hello @dalelotts, I want to change the display format shown in the input text box when date is selected. The current format shown in input box is "Mar 7, 2020 12:00 AM" and I want to change this as "YYYY-MM-DD". I have injected the DL_DATE_TIME_DISPLAY_FORMAT in my component constructor but still its showing in same format. Can you please let me know how to fix this.
Thanks.

Dale Lotts

@dalelotts

Thanks @amchidorian glad you got it figured out

@cajaykumar see the code in the demo - https://pariggwna.github.stackblitz.io/examples/date-picker-input

cajaykumar

@cajaykumar

Hello @dalelotts , I am using angular 8 date-time picker and have a requirement like if user doesn't finish the selection (say just selected date) and when tries to open date picker should start from dates view again. Could you please assist how can I achieve this?
Thanks.

Dale Lotts

@dalelotts

@cajaykumar I suppose one option might be to change the startView if there is an existing date value.

cajaykumar

@cajaykumar

@dalelotts I have the datepicker in a modal. When user doesn't finish selecting date time and closes the modal, the datepicker should display from day view. In my case its showing from where the selection left off. Yes, I tried setting the 'startView' to 'day' again when user closes the modal popup. Still date picker is displayed from time view. Please find my code below.

<dl-date-time-picker [(maxView)]='year' [(minView)]='minute' [(startView)]="startView" [(ngModel)]="startDate" [ngModelOptions]="{standalone: true}" [(minuteStep)]="5" [(rightIconClass)]="rightIconClass" [(leftIconClass)]="leftIconClass" (change)="onInputSelect()">
</dl-date-time-picker>
//Initial Datepicker config
startView = 'day';
rightIconClass = [
'glyphicon', 'glyphicon-arrow-right'
];
leftIconClass = [
'glyphicon', 'glyphicon-arrow-left'
];
//when user closes modal. on close icon call back I have reset the startView to 'day'.

Where communities thrive

People

Repo info

Activity