Menu
I want to customize the ngx-bootstrap datepicker. I want to align left/right side of my input, but it doesn't work.
<div class="col-xs-12 col-12 col-md-4 form-group">
<input type="text"
placeholder="Datepicker"
class="form-control"
bsDatepicker
[bsConfig]="{ adaptivePosition: true }">
</div>
Now it works like this
But I want something like that
I couldn't find any way to customize the datepicker. Can anyone help with this problem.
368
Ngx-Bootstrap has released a package of open-source tools which is native Angular directives for Bootstrap 3 and 4. It contains all core components powered by Angular. In this article we will learn about DatePicker component which is a cool feature of Ngx-bootstrap. Let's create a new Angular project using the following NPM command,
Let add the template in our ngx-bootstrap-datepicker.component.html. In bsConfig method we can format the date and time. showWeekNumbers is a boolean value which is true by default and displays the number of the week.
Now, open the ngx-bootstrap-datepicker.component.ts file and add the following code in this file. Now, open the app.component.html file and add the following code in the file, Date range picker is where we can select a range of datess.
DatePicker with Angular Reactive Form As we know, DatePicker is a form component, and it always a good practice to set the valid data in the form object. Reactive forms provide a model-driven approach to handling form inputs whose values change over time.
Use the placement property to align the datepicker. You can safely remove the adaptivePosition and position using the placement property alone.
<input type="text"
placeholder="Datepicker"
class="form-control"
bsDatepicker
placement="bottom right">
// placement="top" -- add this
<input type="text"
placeholder="Datepicker"
class="form-control"
bsDatepicker
placement="top">
options are : "left" | "right" | "top" | "bottom"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
