A directive to add the behavior of datetime input on unsupported browsers.
MIT License
This module includes a datetime directive and a parser service.
Apart from the formats provided officially, angular-datetime support some new tokens:
Via npm:
npm install angular angular-datetime-input --save
require("angular-datetime-input");
Or use pre-built dist:
<script src="https://unpkg.com/angular-datetime-input"></script>
// Setup dependency
angular.module("myApp", ["datetime"]);
// Use datetime parser
angular.controller("myController", function(datetime){
// Create a parser
var parser = datetime("yyyy-MM-dd");
// Set to current date
parser.setDate(new Date);
parser.getText(); // -> "2015-01-30"
// Parse a date string
parser.parse("2015-01-30");
parser.getDate(); // -> Date object
// Set working timezone. Changing timezone will not affect date object but
// date string (i.e. parser.getText()).
parser.setTimezone("+0800");
// Reset to default timezone.
parser.setTimezone();
// Catch the parsing error
try {
parser.parse("2015-123-456");
} catch (err) {
console.log(err); // -> {code: "...", message: "...", ...}
}
});
Check out the demo page for details.
<input type="text" datetime="yyyy-MM-dd" ng-model="myDate">
<input type="text" datetime="yyyy-MM-dd" ng-model="myDate" required>
<input type="text" datetime="yyyy-MM-dd" ng-model="myDate" datetime-timezone="+0300">
<input type="text" datetime="yyyy-MM-dd" ng-model="myDate" min="Jan 1, 1990" max="Dec 31, 2050">
<input type="text" datetime="yyyy-MM-dd" ng-model="myDate" datetime-model="yyyy-MM-ddTHH:mm:ss">
<input type="text" datetime="dd.MM.yyyy" ng-model="myDate" datetime-separator=",">
This module exports:
datetime
service - a function to create DatetimeParser object.datetimePlaceholder
constant - a map that define the placeholder of each element.Just a plain object. Edit it in config phase to specify different placeholder.
Default value:
{
year: "(year)",
yearShort: "(year)",
month: "(month)",
date: "(date)",
day: "(day)",
hour: "(hour)",
hour12: "(hour12)",
minute: "(minute)",
second: "(second)",
millisecond: "(millisecond)",
ampm: "(AM/PM)",
week: "(week)"
}
A function to construct a date parser. format is a string containing date definition tokens defined by Angular: https://docs.angularjs.org/api/ng/filter/date
A parser object which can convert String to Date and vice versa.
Parse text. This method might throw error.
Return formatted text.
Set date and conver date to text.
Return Date object.
These methods are usually used like:
date = parser.parse(text).getDate();
text = parser.setDate(date).getText();
Set the timezone of the parser. timezone is a string matching /[+-]\d{2}:?\d{2}/
.
If timezone is not provided, reset timezone to browser default.
Setting timezone doesn't affect model value but update text.
time = parser.getDate().getTime();
parser.setTimezone(newTimezone);
time2 = parser.getDate().getTime();
console.assert(time == time2);
Return true if there is any empty element.
Return true if all elements are set.
Set all elements to empty.
datetime-timezone
attribute. Now you can customize the timezone in the directive. #60 @andreyjkeedatetimePlaceholder
.parser.isEmpty
. Fix required issue.min
, max
cause invalid date.datetime-separator
option.ZZ
. #24
parser.setTimezone
. #22
default
attribute.datetime-utc
option.min
, max
, datetime-model
directive.$validators
in angular 1.3.x.Z
.