C#.NET, ADO.NET, ASP.NET, JavaScript, JQuery, AngularJS

AngularJS Datetime Picker

Using angular-date-time-input directive we can format the display of a date in an input box or allow users to enter a valid date with the keyboard.

Requirements:

AngularJS 1.4.x or higher (1.0.x will not work)

moment.js 2.8.3 or higher for date parsing and formatting

bootstrap's glyphicons for arrows (Can be overridden in css)

First add the datetimepiker.js and datetimepicker.templates.js javascript files (from angular-bootstrap-datetimepicker source files) in your project.

Then add the 'ui.bootstrap.datetimepicker' module as a dependency to your application module:

var myAppModule = angular.module('MyApp', ['ui.bootstrap.datetimepicker'])

Now you can use the datetimepicker directive in your html page as below.

<datetimepicker data-ng-model="model.date"></datetimepicker>

Above code renders the following datetime picker in the browser.

Show Angular datetime picker when textbox clicked

This section explains how to show a datetime picker when user clicked on a textbox.

First add the following textbox.

<input type="text" data-ng-model="model.date" id="dropdown1" data-toggle="dropdown">

Now, add the following <ul> element which has datetime picker inside it.

In the above datetimepicker directive we added data-datetimepicker-config="{ dropdownSelector: '#dropdown1' }" attribute. dropdownSelector should match the id of the textbox element.

Now when we click on the textbox, datetimepicker will be visible. Once you select the date and time that value will be visible in that textbox.

This way we can implement angular datetime picker to select the date and time. Please do comment for any suggestions/queries.

To change the date format of angular datetime picker read : Change date format in angular datetime picker

For more posts on AngularJS please visit : AngularJS

In this article i am going to show how to remove footer from Angular ui bootstrap date picker.

Assume you have following angular ui bootstrap date picker

<input type="text" data-datepicker-popup data-ng-model="dateOfBirth" />

above code renders date picker as shown below

If you observe above angular ui date picker image you can see that it is also showing a footer which contains options to choose Today, Weeks and Clear.

We can remove this footer from angular ui bootstrap date picker using following code

if you want to remove footer globally you can use following AngularJS code

yourApp.config(function (datepickerConfig, datepickerPopupConfig) {
    // datepickerConfig.showWeeks = false;
    // datepickerPopupConfig.toggleWeeksText = null;
    datepickerPopupConfig.showButtonBar = false;
});

Or if you want to remove footer for only one specific date picker you can do using following code

<input type="text" data-datepicker-popup show-button-bar="false" />

In this way you can remove footer from angular ui bootstrap datepicker

To remove week column from Angularjs ui bootstrap date picker check this post http://www.coding-issues.com/2015/10/remove-week-column-and-button-from-angular-ui-bootstrap-datepicker.html