How to format user input time format in JavaScript? - javascript

I have user input field that accepts time value. Here is example of that value: 03:45:15.0 I would like to format this value with JavaScript to format the time like this: 03:35:15 PM. Is there a way to complete this with Vanilla JS?
Thank you.

Related

How to get localdateTime format in JS

I'm using Vuejsto develop a project and I'm struggling to make my input type datetime get a min value . The min value has to be the value of the current Date and basically I need it to be formatted the same way it is supposed to be in the field. What I mean is it should have this format.
yyyy-mm-ddThh:mm.
I didn't actually find a way to do it with a built in function in JS.
<input type="datetime-local" min="{CurrentDateValueFormattedLikeThis:yyyy-mm-ddThh:mm}" v-model="tentative.startDate">

JavaScript AWSDate and AWSTime format to insert on db

I have two inputs, one of type date and one of type time.
The first one returns the date. For example, 2020-08-27
The second one returns the hour. For example, 23:04
I have two fields which are of type AWSDate and AWSTime:
date: AWSDate
time: AWSTime
I need to insert these into a mutation, how can I format these to ISO 8601?
I know with the date is with toISOString():
new Date('2020-08-27').toISOString(); // 2020-08-27T00:00:00.000Z
But for the hour of type AWSTime, what's the correct method? Thank you!
I hope I understand you correctly. You want a single ISOString from the individual date and time values.
new Date('2020-08-27 23:04').toISOString()

Reformat date in PHP

I have a problem. I've a date input on my site. When the input type date is not supported by the browser, I'm initializing a jQuery datepicker.
The problem is, that the normal date input returns the value like this:
2019-08-23
And the datepicker this way:
26.08.2019
Instead adding a hidden field in the HTML, I want to re-format the received value via PHP to the first format above. So is there a way to build a small function that checks if the format is the datepicker format and which returns the formatted value like 2019-08-26?
I'm receiving the value with $_POST['date'].
Something like this should work:
echo date("Y-m-d", strtotime("26.08.2019"));
Reference: PHP strtotime()

Format Date and Time into DTG

I have a row where users enter in various type of data in the date in there are different formats that I want to standardize. For example
12/21/2014 1900
This is one possible format I would like for the <td> to change it into DTG format which is
DD-HHMMZ-MMM-YY
Day, Hours in 24 format, Minutes, instead of p.m./a.m. I need Z for zulu, Month and year
How do I have this change once the user enters the data? I was looking at the onchange for javascript but I am not completely sure.
I'm assuming what you're asking is how to force the input to update after the user enters the date information. I'm assuming you know how you're going to format the date based on the given input.
This example shows you how to use jquery's .change() to update the input after something is entered. http://jsfiddle.net/Z5B25/
The basic code looks like:
$('.date').change(function(){
$(this).val('Computed/formatted Date');
});
Though this is not specific to your usage.

How to send AngularStrap datepicker value without timezone?

I'm wondering if it's possible to use AngularStrap's datepicker without it keeping the user's locale's timezone information. In our application we want to handle Contract objects that have an expiration date.
When adding or editing the contract object, there is a datepicker field for selecting the date. The following thing happens:
The user selects the date (e.g. 2013-10-24)
Angular binds the javascript date object to the ng-model field
The binded date object is in the user's timezone (e.g. GMT+3)
The user submits the form
The date gets sent to the server using Angular's $http service
In step 5 the date is converted to UTC format. The selected date was GMT+3 2013-10-24 at midnight, but the UTC conversion changes the date to 2013-10-23 at 9pm.
How could we prevent the conversion, or use UTC dates during the whole process? We don't want the contract's date to change based on the user's local timezone. Instead, we want the date to be always 2013-10-24, no matter what timezone.
Our current solution was to make small changes to the AngularStrap library so that the date won't change when sent to the server.
If we could get the user's selected timezone in the server, we could make another conversion there, but the server doesn't have that information.
All ideas are appreciated!
The issue isn't AngularStrap. Its just how javascript dates work and how JSON formats them for transmission. When you turn a javascript date object into a JSON string, it formats the string as UTC.
For example, I'm in Utah and it is now 07:41 on 2013-10-24. If I create a new javascript date and print it to the console it will say:
Thu Oct 24 2013 07:41:19 GMT-0600 (MDT)
If I stringify that same date (using JSON.stringify(date), I get:
"2013-10-24T13:41:47.656Z"
which you can see is not in my current timezone, but is in UTC. So the conversion is happening just before the form gets sent to the server when it gets converted from a javascript object to a JSON string.
The easiest way to do it would be to just change the date to a string of your own choosing prior to sending the date to the server. So instead of letting JSON change the date to UTC, (assuming you don't care about the time of day) you could just do something like this:
var dateStrToSend = $scope.date.getUTCFullYear() + '-' + ($scope.date.getUTCMonth() + 1) + '-' + $scope.date.getUTCDate();
That will give you a UTC-based string that looks like '2013-10-24' and then you can send that to the server, instead of the JSON format which includes the time info. Hopefully that helps.
UPDATE: As #Matt Johnson said, there are two ways to do it. You said: How could we prevent the conversion, or use UTC dates during the whole process?. If you want to use UTC, then use my above explanation. If you want to just "prevent the conversion", you could use the following:
var dateStrToSend = $scope.date.getFullYear() + '-' + ($scope.date.getMonth() + 1) + '-' + $scope.date.getDate();
A bit late but I spent my afternoon on this and someone might find it useful.
Another way to do this declaratively is to use the dateType, dateFormat and modelDateFormat attributes. Set these in either the config or the HTML e.g
angular.module('app').config(function ($datepickerProvider) {
angular.extend($datepickerProvider.defaults, {
dateFormat: 'dd-MMMM-yyyy',
modelDateFormat: "yyyy-MM-ddTHH:mm:ss",
dateType: "string"
});
});
DateFormat is the format the date will be displayed to the user in the date picker while modelDateFormat is the format it will be converted to before being bound to your model.
I also had default values coming from the server which I needed to be bound to the datepicker on page load. I therefore had to update the format the server serialized dates in JSON to match the modelDateFormat. I am using Web API so I used the below.
var jsonSettings = Formatters.JsonFormatter.SerializerSettings;
jsonSettings.DateFormatString = "yyyy-MM-ddTHH:mm:ss";
The "Angular way" is to use the $filter service to format the date returned by the datepicker.
Example (HTML):
{{inpDate | date: 'dd-MM-yyyy'}}
Example (JS):
$scope.processDate = function(dt) {
return $filter('date')(dt, 'dd-MM-yyyy');
}
Plunker here

Categories

Resources