Bootstrap DateTimePicker using Angular JS in ASP.NET MVC

Hi folks, Here I will show you how to create Bootstrap DateTimePicker using Angular JS in ASP.NET MVC.

Bootstrap DateTimePicker using Angular JS in ASP.NET MVC:

Before starting the development we need to add the following JS and CSS references to our application.

JS References:

CSS References:

Bootstrap.min.css.
bootstrap-datetimepicker.css

Step 1: Create an ASP.NET MVC application called AngularDateTimePicker.

Step 2: Choose an Empty MVC Template and proceed.

Step 3: Right Click on the Controller folder and Create a Controller called HomeController.

Step 4: Replace the following code in HomeController.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace AngularDateTimePicker.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
}

}

Step 5: Right Click on the Index action method and add a View called Index.cshtml.

Step 6: Add the following code in Index.cshtml page.


@{
ViewBag.Title = "Index";
Layout = null;
}

<html>
<head>
<title>
Angular JS DatePicker Demo
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
 
</head>
<body ng-app="Myapp">
<div ng-controller="ctrl" class="container">
<b>{{Title}}</b><br />
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" ng-model="DOB" id="txtDate" data-date-time-picker />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class="col-sm-2">
<button class="btn btn-default" ng-click="GetSelected()">Get Selected</button>
</div>
</div>
<div>
You have selected: {{DOB}}
</div>
</div>

<script type="text/javascript">
var app = angular.module("Myapp", [])
app.directive("dateTimePicker", DatetimePicker)
app.controller("ctrl", function ($scope) {
$scope.Title = "Angular Js Date time picker";
$scope.DOB = "";
$scope.GetSelected = function () {
alert($scope.DOB);
}
})
function DatetimePicker() {
return {
restrict: "A",
require: "ngModel",
link: function (scope, element, attrs, ngModelCtrl) {
var parent = $(element).parent();
var dtp = parent.datetimepicker({
format: "DD-MM-YYYY hh:mm",
showTodayButton: true,
focusOnShow:true,
//pickTime: true


});
dtp.on("dp.change", function (e) {

if (!e.oldDate || !e.date.isSame(e.oldDate, 'day')) {
$(this).data('DateTimePicker').hide();
}
ngModelCtrl.$setViewValue(moment(e.date).format("DD-MM-YYYY hh:mm"));
scope.$apply();

});
}
};
}
</script>
</body>
</html>

Output:

Bootstrap DateTimePicker using Angular JS

View More:

Conclusion:

I hope you would love this post. Please don’t hesitate to comment for any technical help. Your feedback and comments are important to me.

Thank You.

22 Comments

Cancel reply

GAYSew says: January 9, 2021
GO GO GO – http://casinosnigerian.com
Check the connection! Is anyone here?” ??
Or is it better to clarify in a couple of days? ??
The best way to get out of the New Year’s spirit is to go on a journey with your favorite slot!
And you’ll see, the world will start moving again, and with it you
KhthFeve says: January 9, 2021
peoples drug store online drugstore drugstore beetle
JlloHoida says: January 10, 2021
24 hour pharmacy drug store news ce peoples drug store
LokuPaups says: January 10, 2021
best online pharmacy erectile 24 hr pharmacy near me
NllpEpirl says: January 10, 2021
thrifty drug store http://pharmacy-onlineasxs.com/ canadian pharmacy cialis
ovadway says: January 11, 2021
Home page: https://gaypornmovie.net/
AqwsPaups says: January 11, 2021
mexican pharmacy 24 hours pharmacy impotence
FwsxPaups says: January 11, 2021
24 hour pharmacy near me canada rx pharmacy e d
ovadway says: January 12, 2021
Home page: https://razvratnoe.org/
KenCreedmoorblult says: January 12, 2021
najila trindade mendes

bangkok pollutionV
JamesDox says: January 13, 2021
Guys just made a web-site for me, look at the link:
https://www.google.tn/url?sa=t&url=http%3A%2F%2Fzamena-jekrana.onepage.website
Tell me your credentials. Thanks.
Terrellzen says: January 13, 2021
Guys just made a website for me, look at the link:
https://www.google.tn/url?sa=t&url=http%3A%2F%2Flb.ua/society/2020/12/24/473781_onlaynrestoran_smilefood_zapustiv.html
Tell me your guidances. Thank you.
Terrellzen says: January 13, 2021
Guys just made a web-page for me, look at the link:
https://www.google.com.ua/url?sa=t&url=http%3A%2F%2Fukranews.com/other/746423-onlajn-restoran-smilefood-nachal-kruglosutochno-dostavlyat-zakazy-po-vsemu-kievu
Tell me your recommendations. Thanks!
JtmfPaups says: January 13, 2021
ed treatment best ed pills pharmacy in canada
Online Lenders says: January 15, 2021
credit loans for bad credit
Jamesjab says: January 16, 2021
The University of Mumbai is one of the oldest and premier Universities of India. I am honoured and greatly privileged to lead this great Institution; and continue to …
Gang
NYWilliam says: January 16, 2021
free porn – adult videos
RichardPH says: January 16, 2021
With 100+ videos, TeenFidelity provides a colossus heterogeneity of subject-matter from categories e.g. Lesser Women / Teens, During get growing of Women, Teen, Bonking and Cream Pies Stars who while after continuously announce on a decay to noticeable of the closet in the movies are: Kelly Madison, Vienna Rose, Hannah Hays, Shae Celestine and Alexis Adams. Most movies to ‘TeenFidelity’ are directed on: Ryan Madison, Kelly Madison & Ryan Madison, Fumigalli, Andy Zane & Ryan Madison and Robby D.. TeenFidelity features sought-after series such as Chuck Me Down, TeenFidelity, Born Flirty, Can’t Daze a be congruous to It and Nerd Girls. With movies in 78 categories, TeenFidelity can far up clear you with a winsome multiplicity of of seniority entertainment. Rumble the kidney of patsy in a split grave that you neatness to outlay of an consciousness on from amidst the more than four hundred clips TeenFidelity has available. With more than 314 hours of video on sillcock from TeenFidelity there is bear a good up porn in behalf of the most dogged porn connoisseur.
porn sex free videos
RichardIW says: January 16, 2021
best porn free videos
IDWilliam says: January 16, 2021
free mobile gay porn videos
RichardIW says: January 16, 2021
free porn sex videos xxx
LarryUT says: January 16, 2021
free 360 porn videos