fetch

Angular datepicker tutorial



Sharing buttons:

this is part 11 of anglers crud tutorial

in this video we'll discuss why is it

not a good practice to use the browser

built in date picker control installing

an TX bootstrap and finally using the

NZXT bootstrap date picker component in

our angular application first let's

understand why is it not a good practice

to use the browser built in date picker

component this is because the

implementation of date picker component

is different from browser vendor to

vendor this means our end-users may have

different experience depending on the

browser they use let's understand this

with an example so here is what we want

to do we want to capture the date of

birth of an employee that we could

control is very useful when capturing

dates from users now when we use html5

input type date the browser

automatically displays its built in date

picker control let's look at this in

action let's flip out visual studio code

notice right here we have the phone

number HTML so this is the HTML that

displays this phone number field on our

create employee form now let's copy this

HTML and let's paste it after the

department drop-down list and then we've

changed the bits that are required now

we want this field to capture date of

birth so first of all I'm going to

change the label here to date of birth

and let's change the for attribute to

date of birth and a set date of birth as

the value for ID name and

ng-model and at the moment the type

attribute is set to text I'm going to

change that to date notice we have the

date of birth field that displayed as

expected now since we have said input

type to date the browser in this case

Google Chrome is going to display its

built in date picker control so when I

click on this I can write here we have

the Google Chrome built in date picker

control and this is how it looks like to

go to the previous month click on this

button and to go to the next month click

on this button when I click on the month

name right here we see all the months in

here

v18 to go to the years before 2018

scroll ah and to go to years after 2018

scroll down and whenever we select a

date from the calendar the respective

date is populated within the date of

birth input field now let's take a look

at the same date of birth field in

Firefox notice within Firefox we don't

have that little icon right here and

whenever I click on this text box the

date picker control pops up and notice

the state picker control is very

different from the date picker control

that we have on Google Chrome so this

means our end users have different

experience depending on the browser they

use what we want here is consistency

there are many third-party data picker

controls that we can use to provide

consistent experience to our end users

in the exports trap date picker control

is one of them to see the list of all

third-party UI components that we can

use in an angular application navigate

to this URL angler dot IO for /resources

as we scroll down on this page we will

see a section called UI components it's

right here and at this section we see

all the third-party UI components that

we can use in an angular application as

you can see in the X bootstrap is one of

them when I click on this it's going to

take us to their website this website

has got all the documentation for

installing configuring and using their

UI components when I click this get

started button we have the installation

and configuration instructions on this

page and on the Left right here we see

all the UI components that this

framework provides and datepicker

component is one of them to use the NZXT

bootstrap they'd be the control you'll

have to first install and configure the

framework itself and here are the three

steps to do that the first tab is to

install the NZXT bootstrap framework and

here is the npm command for that we

execute this command from the command

prompt i've already executed this

command so I am NOT going to execute it

again when you execute this command it's

going to install ngx bootstrap into the

node modules folder the second step is

to install the

strap itself we can use ADA bootstrap 3

or bootstrap for with ndx bootstrap we

have already installed bootstrap 3 in

part 1 of this video series so I'm not

going to execute this command either and

the final step is to reference the

bootstrap stylesheet within the angular

CLI Jason file again we have already

done the step in part 1 of this video

series so if we take a look at the

anglers Eli JSON file it has got the

Styles property within that and within

these Styles property notice we are

referencing the bootstrap style sheet

and this is coming from the node modules

folder so these are the three steps to

install and configure and the X

bootstrap framework now let's look at

the steps required to use the NZXT

bootstrap datepicker control first

within our app module let's import the

date picker module from ngx bootstrap

slash date picker package and we also

need to include this module within the

inputs array of our attendee module

decorator so right here let's include

the bsd picker module and on this we

need to call for root method so this is

how we import the bootstrap date picker

module and then within our create

employee component let's change the type

from date to text when we have the type

as date the browser is going to display

it's a built in they pick a control and

that's not what we want

so I'm going to change the type to tags

and to use the bootstrap they'd be the

control I'm going to use the directive

vs date picker notice at this point when

we click within the date of birth field

we have the date picker control

displayed but these styles are not being

pulled through that's because we forgot

to reference the date picker style sheet

so we do that within the angular CLI

jacent file so within the Style section

we need to reference the date picker

style sheet notice this is coming from

the ndx bootstrap folder within the node

modules folder

at the moment our server is running in

watch mode so let's stop and start it

again for the changes to take effect we

are on the list page at the moment let's

navigate to the create page and let's

scroll down when we click within the

state of birth field we get the NZXT

bootstrap date picker control when I

click on the month name right here we

see all the months in the year 2018 when

I click on the year we see the e

arranged we can move backwards and

forwards and when we select a date the

selected date is populated within the

date of birth field also notice it's

automatically captured by the angle I

generated for model against this

property date of birth

now let's see how it behaves in Firefox

first let's reload the page notice when

we click within the date of birth field

we get the same date picker control even

in Firefox and hence we have the same

experience now if we take a look at our

create employee component notice on this

date of birth input field by using this

directive be a state picker with this

directive in place when we click within

the date of birth field we get the date

picker control and this is great for

capturing a single date like date of

birth how about capturing a date range

for example let's say you have an open

job role and you want to capture a date

range for accepting series we can very

easily do this using ngx bootstrap date

picker all we have to do is instead of

using vs date pick a directive we use a

different directive for that and that is

BS date range picker notice now when we

click within the field we have a

different interface using this interface

we can capture a range let's say we want

to except see this between January 1st

2018 and February 28th 2018 notice the

selected range is automatically

populated with in the input field we

also have it captured by the angler

auto-generated phone model by the moment

the date picker is using the default

green theme now we want to change this

to dark blue the

so it matches with the rest of the form

also notice the default date format is

month date and then yeah we want to

change it to date month and yeah at the

moment we don't have a default date we

also want to set a default date and

finally this input field is panning

across the entire width of the form we

want to limit its width so the point

that I'm trying to make is this date

picker component is highly configurable

in our next video well discuss how to

customize this date picker component to

meet our requirements now if you're

wondering how do I know the names of

these directives that is vs date picker

vs date range because and what they do

well that's from the documentation so if

you look at the NZXT bootstrap website

on the left you have the different UI

components when you click on date picker

you have all the documentation that you

need on this slide we have our first

example if you want to capture a single

date like date of birth all you have to

do is on an input field use this

directive vs date picker if you want to

capture a date range instead use this

directive Bs date range picker thank you

for listening and have a great day