angularjs timestamp to datetime format string in input field - javascript

I am saving datetime in timestamp string using the following:
date_default_timezone_set('Europe/London');
$bdatetime = "31-03-2016 21:52";
$date = new DateTime($bdatetime);
$bdatetimeTS = $date->getTimestamp();
which is saving fine. And I can fetch that timestamp and convert it back to its original format using following in angular js:
<td>{{item.bdatetime * 1000 | date:'dd-MM-yy'}}</td>
which is displaying fine all the list of records.
Now I need to edit individual records, in edit form, I have the following field:
<input type="text" ng-model="bdatetime" value="{{bdatetime * 1000 | date:'dd-MM-yy'}}" name="bdatetime" id="datetimepicker" required/>
in JS and binding it using the following:
$scope.bdatetime = data[0].bdatetime;
which is showing timestamp in input field rather then showing time date in format in the specific format.
I know how to convert timestamp to datetime format for non-bindable.
How can I do this for bindable input field?
This is from string to time stamp but I kind of need a reverse solution from timestamp to input fields.

var timestamp = data[0].bdatetime;
var date = new Date(timestamp * 1000);
var datevalues = ('0' + date.getDate()).slice(-2) + '-' + ('0' + (date.getMonth() + 1)).slice(-2) + '-' + date.getFullYear() + ' ' + date.getHours() + ':' + date.getMinutes();
$scope.bdatetime = datevalues;

ng-model and value can't be used together. You should use https://github.com/angular-ui/ui-date or write custom directive that handles ngModel controller.

Related

WP contact form 7: get current date value to populate an input field

Using contact form 7 on my website, would like to retrieve the form submission date as an input value to use in "Jetpack CRM" for a custom field. I want to avoid that the user has to select the date with a date picker.
Until now i only managed to get the current date value with [hidden today_date _date] that i can use in email templates, but this is not the thing i need.
What i tried so far (after reading How do I change the value of text field in wordpress contact form 7 using javascript):
In contact form 7, i added the field <label> [text submission_date id:submissiondate ""] </label>, hoping that the javascript would fill out the empty quotes with the dateTime value.
With the plugin "WP Headers and Footers" i added the script
var today = new Date();
var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var dateTime = date+' '+time;
document.getElementById("submissiondate").value = dateTime;
I tried the script in the header, in the body and in the footer.
The result is always: an empty form field and a js error:
Uncaught TypeError: document.getElementById(...) is null
Can anybody help me with this?
EDIT:
Searching for help in this question i got the advice to add [hidden default:today_date _date id:submissiondate ] to the form and enter the js in the footer, like this:
var today = new Date();
var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var dateTime = date+' '+time;
// this will set value for input with id submissiondate
jQuery('input#submissiondate').val(dateTime);
// check if value exists
var new_value = jQuery('#submissiondate').val();
// display in console
console.log('current date time = ' + new_value);
Now the time value finds its way into the confirmation email, but still not into the jetpack crm custom field.
Maybe the problem is that this is a hidden field? I tried alternatively to add [text default:today_date _date id:submissiondate ] to the form to create another field in the hope that this can be used for a custom field in jetpack crm but this does not work either – the custom field shows no value.
Does anybody know how to get this working?
Checking out the stackoverflow page you mentioned, I noticed this:
So the javascript code does not have to be placed on the contact form editor. Rather, it should be place on the page where the contact form short code is located: below is an example of the short code
https://stackoverflow.com/a/50333080/11017029
Maybe you didn't put your JavaScript code on the page where the contact form short code is located.
SOLUTION FOUND – a big shoutout to Santosh # https://www.codeable.io/!
The line [text default:today_date _date id:submissiondate ] in the form was wrong – the correct line is [text submissiondate id:submissiondate].
Summary: With the javascript in the page footer
setInterval(add_date, 1000);
function add_date() {
var today = new Date();
var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var dateTime = date+' '+time;
// this will set value for input with id submissiondate
jQuery('input#submissiondate').val(dateTime);
// check if value exists
var new_value = jQuery('#submissiondate').val();
// display in console
console.log('current date time = ' + new_value);
}
and the correct field [text submissiondate id:submissiondate] in the form template (hidden on the front end with CSS), i can use the field value in jetpack crm to populate a custom field and i can use it in a confirmation email as well. :-)
For those who prefer 2-digit-dates, the script can be edited like this:
setInterval(add_date, 1000);
function add_date() {
var today = new Date();
currentMonth = today.getMonth()+1;
currentMonth = ("0" + currentMonth).slice(-2);
currentDay = today.getDate();
currentDay = ("0" + currentDay).slice(-2);
currentHour = today.getHours();
currentHour = ("0" + currentHour).slice(-2);
currentMinute = today.getMinutes();
currentMinute = ("0" + currentMinute).slice(-2);
currentSecond = today.getSeconds();
currentSecond = ("0" + currentSecond).slice(-2);
var date = today.getFullYear()+'-'+(currentMonth)+'-'+(currentDay);
var time = (currentHour) + ":" + (currentMinute) + ":" + (currentSecond);
var dateTime = date+' '+time;
// this will set value for input with id buchung-versanddatum
jQuery('input#buchung-versanddatum').val(dateTime);
// check if value exists
var new_value = jQuery('#buchung-versanddatum').val();
// display in console
console.log('current date time = ' + new_value);
}

Format date from UTC string

I have a time stamp in a JSON string that I want to break down. The format of the string is
"generatedAt": "2015-01-30T16:01:31.4019286+00:00",
This is consistent in terms of characters and numbers counts
I basically want to extract (in Javascript / JQuery)
generatedDate // the first part of the string up to the letter T
generatedTime // the xx:xx:xx after the letter T
so in this example generatedDate = '2015-01-30', and generatedTime = '16:01'
There is a chance that this rendering of date time is a standard I just don't recognise and may be easily rendered with extracting parts of it.. but I don't recognise it so thats moot
Any assistance greatly appreciated
The value in the property can be converted to a date quite easily using the Date type:
var date = new Date("2015-01-30T16:01:31.4019286+00:00");
From there you can retrieve the parts of the date as required:
var dateString = date.getFullYear() + '-' + ("0" + (date.getMonth() + 1)).substr(-2) + '-' + ("0" + date.getDate()).substr(-2);
var timeString = ("0" + date.getHours()).substr(-2) + ':' + ("0" + date.getMinutes()).substr(-2);
alert(dateString); // = "2015-01-30"
alert(timeString); // = "16:01"
Example fiddle
You can simplify this massively if you use a date format library such as DateJS or MomentJS

Incrementing Date Field using Javascript in Adobe Acrobat

I'm trying to create a form that automatically increments date fields by a month depending on what the user puts into the first field. I've dug through some javascript and am thinking that the issue may lie in the way Adobe date fields are formatted and what Date() in javascript accepts as input. So for this example I want what is entered in date field to increment by one month and be put into date1 field. Below is my effort.
var two = this.getField("date1");
var date = new Date(this.getField("date"));
two.value = (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();
This is entered in date's action field.
I was able to resolve the issue by doing this and incrementing the getMonth() call and setting it to the variable before displaying the date in a formatted way.
var nDate = new Date(inputBox.value);
nDate.setMonth( nDate.getMonth( ) + 1 );
inputBox1.value = (nDate.getMonth() + 1) + "/" + (nDate.getDate()) + "/" + (nDate.getFullYear());

Angularjs Input date format short date

We return json from our services and we have a parser that converts these json dates to dates we can use and display. But id like to display just the short date - we dont need to show the time.
<input type="text" class="form-control"
ng-model="DateOrdered"
datepicker-popup="shortDate"
show-weeks="false" />
id like to see - 11/11/2012 not 11/11/2012 3:00:00
I cant put a value on this input since im using ng-model. id like to not build some custom filter or directive - but i may have too - wondering if angularjs has something out of the box for this.
thanks in advance.
I wound up building a custom date directive. date-format
ngModelController.$formatters.unshift(function (valueFromModel) {
if (angular.isUndefined(valueFromModel) || valueFromModel == "" || valueFromModel == null) {
return valueFromModel;
}
var date = new Date(valueFromModel);
var _date = date.getDate();
var _month = date.getMonth() + 1;
var _year = date.getFullYear();
return _month + "/" + _date + "/" + _year;
});

Change date format who is stored in text field

I have a common date field having a displayDD-MM-YYYY but the real value stored in database is YYYY-MM-DD. The problem is this value is also transmitted to a remote server inside a simple text field (having readonly properties) and I would like interact on this field for change his display in DD-MM-YYYY.
I don't want touch something in database structure for change the way on how the date is stored. I precise I don't have access to html of this remote server but I'm allowed to modify some field by putting code in JS file.
I looked here and in some forum but I don't find a solution and due to my poor javascript knowledge I'm stuck. Thank.
Use inbuilt javascript functions to build the format you want. PArse the string in to a date object and use the following functions to create your desired format
getDate() -> to get date
getMonth() -> to get month
getFullYear() -> to get year
Example
//var birth_date = document.getElementById('birth_date');
//use birth_date instead of hard coded date
//var day = new Date(Date.parse(birth_date));
var day = new Date(Date.parse("2013-09-02"));
alert(day.getDate() + "-" + day.getMonth() + "-" + day.getFullYear());
//set value
document.getElementById('birth_date').value = day.getDate() + "-" + day.getMonth() + "-" + day.getFullYear();
JSFIDDLE
Say you have a string var s = '1989-05-06';. You can get the year, month and day separately like so:
var my_date = s.split('-');
var year = my_date[0];
var month = my_date[1];
var day = my_date[2];
Then, you can display the string below (or organize the day, month and year in any format you would like):
var display_str = '' + day + '-' + month + '-' + year;
You can catch the form submit event and change the value before it is sent:
Let's say you have a form #myForm:
var form = document.getElementById('myForm');
To catch submission:
try {
form.addEventListener("submit", changeValue, false);
} catch(e) {
form.attachEvent("onsubmit", changeValue); //Internet Explorer 8-
}
Now you can change the desired value inplace.
function changeValue(){
var field = document.getElementById('idOfField');
field.value = field.value.split('-').reverse().join('-');
}
well, we can do that using simple javascript function.
we just need to pass server date(YYYY-MM-DD) and it wll return expected date (DD-MM-YYYY) format.
function convertDate(serverDate) {
var dateCollection = serverDate.match(/\d+/g),
year = dateCollection[0],
month = dateCollection[1],
day = dateCollection[2];
return day + '-' + month + '-' + year;
}
Example:-
convertDate('2013-09-02'); // (YYYY-MM-DD) format
output:-
'02-09-2013' //(DD-MM-YYYY) format
Hope this will help you...

Categories