I am using 720kb.datepicker for picking the date.
What I'm trying to do is:
1.- On the UI I want to have a date in angular's 'large' format
2.- In the mode I need to have it in 'yyyyMMdd' format
this is the code I have:
<section ng-controller="InboundCTRL as vm">
<datepicker date-set="2015/08/15" date-set-hidden="false" date-format="yyyyMMdd">
<input ng-model="date" type="text"/>
</datepicker>
</section>
Anyway, how do I assign this 'date' to vm's property??
Thank you!
Related
I would like to have 2 textboxes assigned to the same ng-model initialized to Date.now() and allow them to be edited by the user.
My template looks like:
<div ng-controller="MainCtrl">
<input type="text" ng-model="date | date:'yyyy-MM-dd'" />
<input type="text" ng-model="date | date:'HH:mm'" />
<button ng-click="submit()">Submit</button>
<div ng-if="show">
{{ date }}
</div>
</div>
And my controller looks like:
angular.module('app', []).controller('MainCtrl', function($scope) {
$scope.show = false;
$scope.date = new Date(Date.now());
$scope.submit = function () {
$scope.show = true;
}
});
Plunker: http://plnkr.co/edit/d2slQW6pDTLM4KTo
In my example, the textboxes are not editable, and I get a console error stating the expression is non-assignable.
How can I modify this example to allow the date parts to be modifiable?
If you're willing to use date and time inputs instead of text, this is very easy to do.
<input type="date" ng-model="date" />
<input type="time" ng-model="date" />
Because they're bound to the same Date instance, leap days daylight savings (where a day might be 23 or 25 hours) are supported.
If you don't like the native date and time inputs and want some more control over the style/functionality and consistent UI across devices, you can try Kendo UI's DatePicker and TimePicker widgets. They both have AngularJS support and are included in the free offering called Kendo UI Core.
And if you want to avoid having milliseconds in your time picker, make sure they're stripped from whatever Date instance is bound to your scope property.
$scope.date = new Date(Date.now());
$scope.date.setMilliseconds(0)
As an aside, I don't believe filters work in ng-model expressions, which is probably the source of your error message.
I'm getting my backend date as follows:
2020-01-01T03:00:00.000Z
I am using the daterangepicker from the AdminLTE template.
my field:
<div className="col-sm-3">
<label>Contratação *</label>
<Field
name="dt_contracting"
type="date"
className="form-control"
/>
</div>
I want to convert the received date, to the format "DD/MM/YYYY"
my input is already in the correct format to select, but when I receive the Back-End date, it is not filled due to difference in format.
Easiest way is to use the built-in toLocaleDateString() function. MDN
In your case you can use it like this:
function toPrettyDate( rawDateStr ) {
const date = new Date( rawDateStr );
return date.toLocaleDateString('en-GB'); // Should really use user-based locale here
}
You can use momentjs.
Prefer this for installation
https://www.npmjs.com/package/react-moment
https://momentjs.com/docs/ for examples
I am getting date values from the ng-model from the controller. I would like to format the date as 10-22-2013 But in the output i am getting the date format as 10/22/2013
what is the correct way to format the date here?
js :
angular.module('dateInputExample', [])
.controller('DateController', ['$scope', function($scope) {
$scope.example = {
value: new Date(2013, 9, 22)
};
}]);
html :
<form name="myForm" ng-controller="DateController as dateCtrl">
<label for="exampleInput">Pick a date </label>
<input type="date" id="exampleInput" name="input" ng-model="example.value"
placeholder="yyyy-MM-dd" min="2013-01-01" max="2013-12-31" required />
<div role="alert">
<span class="error" ng-show="myForm.input.$error.required">
Required!</span>
<span class="error" ng-show="myForm.input.$error.date">
Not a valid date!</span>
</div>
</form>
Live Demo
Using purely HTML5 there is no answer to your question. Refer to this link.
There is no way possible to change the format
We have to differentiate between the over the wire format and the
browser's presentation format.
Wire format The HTML5 date input specification 1 refers to the
RFC3339 specification 2, which specifies a full-date format equal
to: yyyy-mm-dd. See section 5.6 of the RFC3339 specification for more
details.
Presentation format Browsers are unrestricted in how they present a
date input. At the time of writing Chrome has the most extensive date
support [3]. It displays a date picker using the user's local calendar
format. Opera (v10.6+) also displays a date picker, but shows the date
in the wire format. Other browsers, such as Firefox 44.0.2 and
Internet Explorer 9/10/11 display a text input field with the wire
format.
References http://www.w3.org/TR/html-markup/input.date.html
https://www.rfc-editor.org/rfc/rfc3339
https://plus.google.com/102860501900098846931/posts/hTcMLVNKnec
I suggest using angular-ui. It has a neat load of modules that makes everything easy for angular.
The markup in the view would look like this:
<p class="form-group">
<label>Result</label>
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="date" />
</p>
And on the controller:
angular.module('ui.bootstrap.demo').controller('DateParserDemoCtrl', function ($scope, uibDateParser) {
$scope.format = 'MM-dd-yyyy';
$scope.date = new Date();
});
I am using Stripe with my angularJs app. Although the code below works fine, I wanted a month, year drop down for the expiry date.
<form stripe-form="stripeCallback" name="checkoutForm">
<input ng-model="number" placeholder="Card Number"
payments-format="card" payments-validate="card" name="card"/><br>
<input ng-model="expiry" placeholder="Expiration"
payments-format="expiry" payments-validate="expiry"
name="expiry"/><br>
<input ng-model="cvc" placeholder="CVC" payments-format="cvc" payments-validate="cvc" name="cvc"/><br>
<button class="checkout" type="submit" ng-disabled="checkoutForm.card.$invalid">Checkout</button>
</form>
How do I integrate two drop downs with this form?
Thanks.
Something along these lines would probably give you what you need.
<select ng-model='expiry_month' ng-change='expiry=expiry_month+"/"+expiry_year'>...</select>
<select ng-model='expiry_year' ng-change='expiry=expiry_month+"/"+expiry_year'>...</select>
I am having trouble formatting a date in a read-only field using AngularJS. This is my html code -
<div class="row">
<label class="col-md-2">Date Last Login:</label>
<div class="col-md-3">
<input type="datetime" name="dateLastLogin" class="form-control" data-ng-model="loginDate" readonly />
</div>
</div>
I have tried to format it using this code in my controller -
$scope.$watch('vm.account.dateLastLogin', function(newValue) {
$scope.loginDate = $filter('date')(newValue, 'MM/DD/yyyy');
});
Putting a break point in the controller, I see the function being called but nothing is displayed.
If I leave my html like this -
<div class="row">
<label class="col-md-2">Date Last Login:</label>
<div class="col-md-3">
<input type="text" name="dateLastLogin" class="form-control" data-ng-model="vm.account.dateLastLogin" readonly />
</div>
</div>
I get a displayed value that includes the date and time but not formatted as I need it. What am I missing?
According to this answer, the W3C removed the datetime input type from the HTML5 Specification. date and datetime-local are still valid.
In your example, throw out the formatting filter and simply use the ng-model="vm.account.dateLastLogin" on a valid date input, like:
<input type="date" ng-model="vm.account.dateLastLogin" />
or
<input type="datetime-local" ng-model="vm.account.dateLastLogin" />
These date formats are formatted correctly to the client browsers locale.
Or, if you actually just want it in some text field, put the filter directly in the ng-model but still use a valid Date object, like:
<input type="text" ng-model="vm.account.dateLastLogin | date:'MM/dd/yyyy'" readonly />
See this jsBin for some examples