Sharing Top Content from the Angular-sphere.

How To Use Bootstrap DateTime Picker In ASP.NET MVC With Angular As Directive

Use #Bootstrap DateTime Picker In #ASPNETMVC w/ #Angular As Directive via @CsharpCorner

  • In this article, we will learn how to implement Bootstrap DateTime picker as Angular Directive in ASP.NET MVC.
  • Steps to be followed – – Step 1 – – – – Create an application and download the below CSS and JS files to add Bootstrap DateTime Picker.
  • Create one function for dateTimePicker directive and add the following code.
  • In the above code, we are restricting the dateTimePicker directive to “Attribute only” and we will be using some “ngModel” for getting and setting the value of selected date time.
  • Also, we are adding datetimepicker change event in order to set the values to ngmodel.

We can create Bootstrap DateTime Picker in MVC easily but if we use normally like how we refer like normal asp.net mvc as we will face some problems that date picker wont works as expected in order to avoid that we need to do it in angular way so we will create it as a directive and we can use it where ever we want in our project.

In this article, we will learn how to implement Bootstrap DateTime picker as Angular Directive in ASP.NET MVC.

We can create Bootstrap DateTime Picker in MVC easily. Now, if we use it normally with ASP.NET MVC, we will face some problems and DateTime Picker won’t work as expected. In order to avoid that, we need to do it in the Angular way. So, we will create it as a directive and we can use it wherever we want in our project.

Steps to be followed

Step 1

Create an application and download the below CSS and JS files to add Bootstrap DateTime Picker.

You can download it from NuGet Package Manager using the command Install-Package Bootstrap.Datepicker -Version 1.6.4

Step 2

Refer the above-shown files in the View page.

Step 3

Create the HTML markup to show date time in the textbox.

Step 4

Create one module in JavaScript file or in script tag.

Create one directive named dateTimePicker and add to the app module.

How To Use Bootstrap DateTime Picker In ASP.NET MVC With Angular As Directive