I am using a native HTML Date input component like below in Angular -
<input #dateField id="dateField" type="date">
#ViewChild("dateField") el: ElementRef;
onClick() {
console.log(this.el.nativeElement.shadowRoot);
}
It rendered the date based on the operating system locale of the user like below -
However, whenever I try to access the value from this field, it always returns the value in 'yyyy-mm-dd' format.
I want to access the actual string value which is getting displayed on the UI as per user locale like '16-Sep-2021'. Is there any way to achieve this? I have tried properties such as innerHTML, textContent, innerText, outerText but none of them is returning the actual displayed value.
Also, is it possible to access the locale information in which it is showing this date value? Even if the default placeholder text -
I am also not able to access the shadowRoot property on this element, it always returns me null.
Also, this is not specific with Angular, even if normal Javascript it gives same result.
There is no way to achieve what you're looking for. You can only retrieve the value in one of the following formats:
value will return the date in yyyy-mm-dd.
valueAsNumber will return the date in timestap
valueAsDate will return the date in JavaScript Date format.
In angular you can use,
fromDate
package to convert date into output like you wanted, here is the snippet just copy and paste at required place and you will be able to see the date format you wanted:
//add this
import { formatDate } from "#angular/common";
//format it
const format = 'dd/MM/yyyy';
const myDate = '2019-sep-16';
const locale = 'en-US';
const formattedDate = formatDate(myDate, format, locale);
console.log(formattedDate)//16/09/2019
Hope this will help :-p
Related
I'm using the component DatePicker from antd.
I have currently a Form from antd, in which there's a Form.Item, in which I put the DatePicker.
I want the Form.Item to be given the date in a specific format, lets say YYYY-MM-DD, is there a way to do that?
by giving it the prop format I can choose how it will look like in the UI but I'm trying to make it send back the value by the same format.
I've tried giving it a dateFormat prop with the function
function dateFormat(date) {
return moment(date).format("YYYY/MM/DD");
}
but it doesn't work.
is there a way to do this manipulating the data in the onChange function?
so apparently there's no way to do it in the props,
I've checked and so has #MoaazBhnas.
If anyone somehow finds a way, I'll be looking forward to hear!
First, for people wondering, I'm referring to this DatePicker
https://danielykpan.github.io/date-time-picker/#locale-formats
While the DatePicker feels and looks great, I have an issue with the outputting values. There are numerous options to format the view-part of a date, but I haven't seen or found examples or explanations on how I can switch the outputted ISO-8601 (2018-08-29T00:00:00.000Z) standard in my form. I'm using the datepicker in a reactive form and I have several pages with a similar prerequisite. I need to parse this value into a different format. For example...
29-08-2018
My first attempt - which wasn't too smart to begin with - was using [(ngModel)]="dateField" to grab the value that is inputted and change it into a value that I wanted to. Needless to say, of course it was changed in the view as well and since I didn't refer to index of the form field it merely caused a blank field. Shortly after I realized that the approach was poor to begin with, but since I can't find configurations for this particular problem I'm pretty lost as to what I can do.
#ak.leimrey. Normally all the datepicker give you a value of one type (in your case a string format in ISO, other case, e.g. using ng-bootstrap, return an object with day,month and year). if you want to send in other format, in the submit you can map the values and convert the form.value.
submit(form)
{
if (form.valid)
{
let result={
...form.value, //all the values of the form, but change some one
searchParams:form.value.searchParams.map(x=>{
...x
value.map(v=>{
let items=v.split('-');
return items[2].substr(0,2)+"-"+items[1]+"-"+items[0];
})
})
}
console.log(result)
}
}
Yes in your case transform the object is some hard but see as using the spread operator and map you can transform the value
use moment js libaray . its a simple and rich library that can help u ;
u can get it via npm : npm i moment .
then u can convert formats like this :
moment("2018-08-29","YYYY-MM-DD").format("YYYY-DD-MM"); // outputs : 2018-29-08
or
moment("2018-08-29","YYYY-MM-DD").format("DD-MM-YYYY"); // outputs : 29-08-2018
I would like to send epoch format value of user datetime selection when the form is been submitted
Would you please tell me how i do that ?
http://s529471052.onlinehome.fr/datetimeform/gpio/test5.htm
I expect to send epoch data with GET method like this : /test5.htm?datetime=1494335700
at the moment it sends outstanding format what would not be usuable in backend :
/test5.htm?datetime=29+December+2016+-+10%3A50&submit=
--
By the way, for some unknown reasons 'Delete' and 'Calendar' graphicon icons won't be displayed in the datetimeform even css file is there.
Since the 'DateTimePicker' library you're using doesn't seem to have any support for this, you'll have to patch it yourself.
Firstly give the existing #dtp_input1 element a name so that it will be sent as a parameter:
<input id="dtp_input1" name="dtp_input1" type="hidden"/>
Next we need to hook the picker's setValue() method in order to put the field's value into the format we want:
/* get the datetimepicker controller */
let picker = $(`.form_datetime`).data(`datetimepicker`);
/* override its setValue() method */
let f = picker.setValue;
picker.setValue = function(...xs) {
/* call the original method first */
f.call(this, ...xs);
/* now set the linked field to epoch format */
$(`#${this.linkField}`)
.val(`${(this.getDate() || new Date(0)).getTime()}`);
};
Now when you submit the form it should yield a query something like this:
?datetime=20+January+2017+-+03%3A15&dtp_input1=1484842500000
where dtp_input1 is the epoch value and datetime is the human-readable string from the text box.
I am trying to create a datepicker in ember.js using the ember-pikaday addon. The datepicker should have a date in it when it is displayed. So, I added the following code to my template:
{{pikaday-input value=rental.date format="MMMM Do YYYY" yearRange="2016" useUtc=true}}
However, even though I specify the value as rental.date, the input is blank. I know that the value of rental.date is not null because when I set the placeholder to rental.date, the placeholder's date is correct.
The problem with your case is due to the fact that you are passing a momentjs object to ember-pikaday directly. Instead of passing the momentjs object directly just create a computed property called as follows on your owner component:
rentalDate:Ember.computed('rental.date', function() {
return this.get('rental.date').toDate();
}),
and perform binding to rentalDate. ember-pikaday does not handle momentjs object passed in by itself, just extract the actual javascript date object via toDate() as shown in code snippet above. Just for clarification you can also pass formatted string to ember-pikaday such as "25/05/2016", "2016.05.25", etc. It will also handle such string values properly.
I'm getting a response from an API containing a date in the following format "/Date(1447773909000-0500)/"
I have an angular filter that pulls out the timestamp:
.filter('formattedDate', function () {
return function (posteddate) {
if (!posteddate || !posteddate.length) {
return;
}
return posteddate.slice(6, 19);
};
})
When I display the date I use two filters, mine and the angular date filter to properly format it.
<span class="list-content col-sm-6">{{appointment.ApptDateTime | formattedDate | date:'MMM dd, yyyy hh:mm a'}}</span>
The problem I'm having is the time is adjusting based off the users current time zone. I want to ignore this and instead use the value as it's returned with out altering it. I notice that depending on the timezone of the computer the response from the API changes the returned date. So instead of "/Date(1447773909000-0500)/" it will respond with "/Date(1447914211000-0700)/"
Try adding following line in your WebApiConfig file.
config.Formatters.JsonFormatter.SerializerSettings.DateTimeZoneHandling
= Newtonsoft.Json.DateTimeZoneHandling.Local;