I am using moment.js to get the current date, however I am having a problem about the date formatting and I don't have any idea on how to customize it since I am just new using it.
By the way I used this.
moment().format('LLLL');
My expected output is:
Mmmm-dd-yyyy hh:mmAM/PM (Timezone) or just like Sep-19-2020 3:00AM (GMT +8)
Is the any other way to achieve this?
moment().locale('tr').format("MMM-DD-yyyy h:mA [(GMT] Z[)]")
moment().locale('en_US').format("MMM-DD-yyyy h:mA [(GMT] Z[)]")
If you want to use locale in React Native.
instead
import moment from 'moment'
you should use this
import 'moment/min/moment-with-locales'
moment.locale('tr');
moment().format("MMM-DD-yyyy h:mA [(GMT] Z[)]");
The things you write in square brackets are written directly. that is, they are escape characters.
Related
Is there any React-native library that helps getting the difference between two dates. I mean like the following.
Example
try using moment
import moment from 'moment';
{
moment(date, 'YYYY-MM-DD')
.month(0)
.from(moment().month(0))
}
'YYYY-MM-DD' can be whatever format
this one is getting me the difference between the given date and now
here you can find documentation https://momentjs.com/docs/
and here more libraries https://blog.logrocket.com/4-alternatives-to-moment-js-for-internationalizing-dates/
Usually date pickers allow users to select any date from the calendar. Besides to that I want to allow user to enter date manually as shown in the image.
Can anybody suggests any RN package that suits my requirement?. Thank You
I would use a masked text input.
Try using this iMask.js - it's very powerful!
https://imask.js.org
With this react-native wrapper for it:
https://github.com/uNmAnNeR/imaskjs/tree/master/packages/react-native-imask
Then it's just a matter of:
<IMaskTextInput
value={someValue}
mask={Date}
min={new Date(1990, 0, 1)}
max={new Date()} // today
lazy={false}
onAccept={(value, mask) => console.log(value)}
/>
See docs of both libraries for more config details.
You can easily extend your own custom TextInput with masking functionality using this wrapper.
I am working with React Native version 0.45.1 and with moment version 2.18.1.
I am trying to change the date according to the device local, but I always get the date in 'en-Us' locale.
I can't import all of the locales as I saw in some solutions since I don't know the device locale in advance.
(for example: https://github.com/moment/moment/issues/2962)
any other options?
I can't import all of the locales as I saw in some solutions since I don't know the device locale in advance.
Actually, you can import all of the locales in moment like this (moment-with-locales is mentioned right there on the homepage):
import moment from 'moment/min/moment-with-locales'
// Or if you are using require instead:
var moment = require('moment/min/moment-with-locales')
Then you should be able to get your device locale with whatever module/method you prefer (in my example, I'll be using Expo) and change the moment locale to it. For example:
var deviceLocale = await Expo.Util.getCurrentLocaleAsync()
moment.locale(deviceLocale)
I won't say that importing everything is the best method for handling this as moment-with-locales is larger than just moment, but it does what you want it to accomplish. You can also go the route of just importing the locales you support as mentioned in that Github comment I linked to.
Instead of importing locale by locale, I'm using this solution to set the locale globally:
import { getDeviceLocale } from "react-native-device-info";
import moment from "moment";
import "moment/min/locales";
const deviceLocale = getDeviceLocale();
moment.locale(deviceLocale); //set your locale (eg: fr)
moment(1316116057189).fromNow(); // il y a 7 ans
Sharing this to those who need it
I'm currently playing around with deck.gl.
Taking the UK accident example (3d-heatmap). How can I change the language used to display the POI in mapboxGL?
Where should I put the mapboxGL equivalent of:
map.setLayoutProperty('country-label-lg', 'text-field', '{name_fr}');
This is mostly related to the usage of react-map-gl rather than deck.gl, given that's what the example is using.
You can grab the mapbox map instance using the getMap() method of the < MapGL> component, and call the method to change the layout property:
<MapGL ... ref='map' />
const map = this.refs.map.getMap()
map.setLayoutProperty('country-label-lg', 'text-field', '{name_fr}')
I'm setting the value of a bootstrap datepicker by making use of the setValue method provided.
For example
tripToDatePicker.setValue(tripFromDatePicker.date);
But for some reason the calendar is not updated
'setValue' is replaced by 'setDate'.
Using a string as input for setDate can be tricky. It has to match with the dateformat, else you can get unexpected results. It is more safe to create a 'new Date(y,m,d)' from your input, e.g. new Date(2015,3,10) for '10 Apr 2015'. This will always work.
When using a date representation in seconds, e.g. 1428659901, then use 'new Date(value*1000)'. Note that datepicker will eat any value here, but only show the selected date in the calendar if hours, minutes and seconds are equal to 0. Took me a while to figure that out....
Edit:
http://www.eyecon.ro/bootstrap-datepicker/ is not much documented, you should try http://eternicode.github.io/bootstrap-datepicker/.
anyway the code below will work for you
$("#dp1").datepicker("update", "02-16-2012");
or
$("#dp1").datepicker("setValue", "02-17-2012");
where "#dpi" is the id of the text field on whcih datepicker is used.
After trying many things, I ended up using "update" method. The $("#dp1").datepicker("update", "02-02-2012") or $("#dp1").datepicker("update", "02/02/2012") works for me. Surprisingly no document about this method at author website. Thanks.