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
Related
Somewhat new to react and having trouble passing multiple state values to an input.
Specifically, state from drop-down menus. I can accomplish this in a p tag by chaining the various state values together.
This works
<p>
{this.state.one}_
{this.state.two}_
{this.state.three}_
{this.state.four}_
{this.state.five}
</p>
This will return
one_two_three_four_five
Whenever I try to pass these same values into a single input I get an error.
This does not work
<label>
Title:
<input
value=
{this.state.one}_
{this.state.two}_
{this.state.three}_
{this.state.four}_
{this.state.five}
type="text" />
</label>
How can one pass multiple state values into a single input?
Template literals with variables :
<input
value={ `${this.state.one}_${this.state.two}` }
/>
You have to pass a single expression to the value attribute. Change to this:
<label>
Title:
<input value={`${this.state.one}_
${this.state.two}_
${this.state.three}_
${this.state.four}_
${this.state.five}`
}
type="text" />
</label>
Note: this is ES6 string interpolation. The ES5 alternative is the regular string concatenation with "+"
I am using react time picker(rc-time-picker) in my code, I want to set the time picker value dynamically.
Here is my Time Picker Code
<span id="editstartTime">
<span class="rc-time-picker timeStylstartTimeAdd">
<input type="text" class="rc-time-picker-input" readonly="" value="">
<span class="rc-time-picker-icon"></span>
</span>
</span>
And I tried like this.
$('#editstartTime span input').val(this.state.shifts[index].startTime);
But it did not worked for me.
Please help me to overcome this issue.
Thanks in advance.
TimePicker has a value state of type moment, which holds the current value.
so e.g. if you instantiate with a state called timePickerValue:
<TimePicker value={this.state.timePickerValue} ... />
then you can modify timePickerValue using
this.setState({timePickerValue: newValue})
(In your example newValue would be this.state.shifts[index].startTime)
I suggest you try out this example as it shows how to mutate the TimePicker.value state.
const now = moment().hour(0).minute(0);
<TimePicker
showSecond={false}
value={moment().hours(13).minute(1)}
className="time-picker"
placeholder="HH:MM"
onChange={(e) => {
console.log(e);
console.log(moment(taskCreateFormData.startTime));
onTimeChange(e, 'start');
}}
format={format}
use12Hours
/>
if you take format for use12Hours then if you write moment().hours(13).minute(1) time like this then it will convert to PM time format
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 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!
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