How to use moment.js to format the v-model data from a vuetify v-text-field (type:time)? - vue.js

I have this element:
<v-text-field
label="Choose a time"
type="time"
mask="time"
step="1800"
prepend-inner-icon="access_time"
v-model="expiryTime"
:rules="[v => !!v || 'Time is required']"
required
#change="getTime"
></v-text-field>
I want to trigger the getTime method to convert the v-model value into a h:mm format. As I've been testing I have entered 12:00 pm each time as the value for expiryTime and have done the following:
getTime(){
alert(moment().format('h:mm')) //returns current time in x:xx format
alert(this.expiryTime); // Returns '1200'
alert(moment(this.expiryTime).format('h:mm')); // returns '4:26, expect 12:00
alert(moment(this.expiryTime, 'h:mm')); // returns 'Sat Aug 17 2019 12:00:00 GMT-0600', expect 12:00
Basically I'm getting some unexpected values and I don't know why. If I can get the current time in the top alert I am rather confused about how formatting the expiryTime data the same ways ends up being 4:26. And the final alert returns the entire time with the date and etc.
Can someone please explain how I can convert the expiryTime data to be in h:mm format properly?

The moment(String) constructor takes either a ISO 8601 string, or an RFC2822 date time string. If neither of those standards are used, the format must be specified as the second argument of the constructor.
expiryTime (1200) is in the form of hmm, but you had specified h:mm, which would've required a colon between the hour and minutes for moment to parse the date correctly. The fix is to remove the colon.
console.log(moment(1200, 'hmm').format('h:mm'))
console.log(moment(135, 'hmm').format('h:mm'))
console.log(moment(2001, 'hmm').format('h:mm'))
<script src="https://unpkg.com/moment#2.24.0/moment.js"></script>

Related

Why are the minutes disabled in vue-ctk-date-time-picker?

I am using the vue-ctk-date-time-picker to display a date time picker modal where users can pick date and time. I use a minDate such that users cannot pick date and time less than the current date and time. This works perfectly with format YYYY-MM-DD HH:mm:ss, but I needed the AM and PM format so I changed the format to YYYY-MM-DD HH:mm a. Now, the PM equivalent of the AM date is also being disabled.
For example, its 8:30 AM, so the picker disables all minutes upto 30 and users can only select 31, 32 and so on. But if I select PM, the minutes are still disabled, ie, the users are only able to pick from 31, when its not even PM yet.
Has anyone faced this problem? Is there a problem with package itself?
For anyone else having this problem, this is the solution according to the document here: https://github.com/chronotruck/vue-ctk-date-time-picker#behaviour
In order to avoid having too much properties in the component, We're
adding a behaviour property that is an object including some annex
behaviour values.
The default value for this object is:
{
time: {
nearestIfDisabled: true;
}
}
To override those values, pass a new object with the values you want
to override:
<ctk-date-time-picker
:behaviour="{
time: {
nearestIfDisabled: false
}
}"
/>

Change date to String format

I need to send a date(ISO) to server from my file(React-native). But backend(node.js) accepts a date in string format.
Date in UI => 2021-02-10T13:01:00.000Z.
Expected Date format in backend is => "2021-02-10T13:01:00.000Z"
I tried date.toString() method. It changes the format of date like Wed Feb 03 2021 16:46:56 GMT+0530 (India Standard Time) this.
Is there any other JS method to change the typeOf date.
Thanks in Advance.
You can use moment : moment documentation
You can use "moment" package to format date.
import moment from "moment";
moment(date,"yyyy-MM-dd'T'HH:mm:ss.SSS'Z'",true).format("yyyy-MM-dd'T'HH:mm:ss.SSS'Z'")

ion-datetime displayFormat how to escape literals in ionic4?

I want to have time like 14h 32m. My code:
<ion-datetime displayFormat="HH(h) mm(m)" placeholder="Set Duration">
</ion-datetime>
But ionic treats (h) and (m) as hours and minutes and I have in result: 14(2) 32(32).
well you can put this HH:mm and you should get this 14:32. I don't really know if you can put behind hours or minuts.

Swift 3 playground logs dates in local format. How?

If you run a line like this in a Playground in the US:
let today = Date()
You'll see output like this to the right of the source code:
"Sep 26, 2016, 8:17 PM"
That appears to be the date, displayed in the local time zone, using medium date and time style.
How does that work?
If you try to print the date:
print("today = \(today)"
You'll see "Today = 2016-09-27 00:18:55 +0000\n", which is UTC, and appears to be unix date format.
What function is the Playground using to display the date when you first create a date? Is there a way to get to that output format from code or from the debug console?
Up until now I've created a date formatter that I use to log dates, display them in the console, etc.
It's lurking in CustomPlaygroundQuickLookable protocol, which Date conforms to:
if case .text(let str) = today.customPlaygroundQuickLook {
print(str)
}

Custom DateTimePicker value isn't saved in Application Settings

UPDATED :
I want to save a Custom DateTimePicker.Value in my Application Settings.
The custom format is : dd/MM/yyyy hh:mm:ss, instead of dd/MM/yyyy
The field i've created in the application settings parameters is LASTSAVE (DATE / APPLICATION)
When I try to link in the ApplicationSettings/PropertyBinding ... VALUE with my field LASTSAVE, i have an error :
The Value '01/01/0001 00:00:00' is not valid for 'Value'. 'Value' must
be ... 'MinDate' et 'MaxDate'.
Name of the parameter : Value
I then entered the MIN and MAX date in the properties of my control DATETIMEPICKER.
I have also put into the properties Value a start date like 23/11/2011 12:00:00 ;
However, when i retry to link in the ApplicationSettings/PropertyBinding ... value to LASTSAVE / I have the same error (The Value '01/01/0001 00:00:00' is not valid for 'Value'. ). I've saved all, do a process that put a value in the datetimepicker.value, but it's not saved, cause not linked.
A solution please ?
'01/01/0001 00:00:00' is DateTime.Empty, the default value for a DateTime that hasn't been set. Is there a value in your application settings to begin with? Are you handling the case where the value has not yet been set?