RobinHerbots / Inputmask

Input Mask plugin
https://robinherbots.github.io/Inputmask/
MIT License
6.4k stars 2.17k forks source link

Using input format with translate.js? #1838

Open S204STi opened 6 years ago

S204STi commented 6 years ago

Hey Robin, first off thanks for this mask plugin. Makes datetime operations way easier with browsers that don't support html5 datetime functionality.

I was trying to use different input formats for datetime based on language, which my translate.js file supports me doing without a ton of additional code, I'm just having a hard time determining how or if I can do that with your mask.

The code I'm trying to use looks like this: $timeout(function(){ var dateFormat = $translate('account_settings_dateOfBirth_placeholder'); var formattedDate = Inputmask.format({ alias: "date", inputFormat: dateFormat }); jQuery('#dateOfBirth').attr('data-inputmask', '"alias": "date"'); jQuery('#dateOfBirth').inputmask(formattedDate); });

Pardon the 'jQuery', I can't use '$' here because I'm working angularjs. I apologize if this is covered in your docs already - I wasn't able to find exactly what I was trying to do. Thanks for your time!

RobinHerbots commented 6 years ago

@S204STi ,

The alias is datetime not date. If the inputformat is in the correct format this will work. But the datetime alias in version 4.x (which accepts an inputformat) is still a WIP. (4.x = beta) Formats like d/m/yyyy don't work correct. all dd/mm/yyyy variants should work already.

Also apply the mask to the input. The formatting will be done automatically. You do not need to use Inputmask.format and try applying the formattedDate with jQuery('#dateOfBirth').inputmask(formattedDate);

Inputmask({ alias: "datetime", inputFormat: $translate('account_settings_dateOfBirth_placeholder')}).mask("dateOfBirth"); 

Be aware that you do not need jquery to use the inputmask.

S204STi commented 6 years ago

Oh, ok. This is a bit easier than I was making it out to be... thanks very much for your time.

It does seem like US date formats don't quite work yet, is that correct? Inputmask({ alias: 'datetime', inputFormat: 'mm/dd/yyyy'}).mask("dateOfBirth"); still shows dd/mm/yyyy in the form for some reason, but it's a trivial issue at the moment...

Thanks very much for taking the time to get back to me either way, I really appreciate it!

Warm regards,

S204STi commented 6 years ago

untitled

here's an example of what I'm seeing on my end.

html is the following:

<input type="text" name="dateOfBirth" id="dateOfBirth" required ng-model="signUpCtrl.form.dateOfBirth" ng-required="signUpCtrl.form.position == 'Student'" ng-change="signUpCtrl.verifyAge()" placeholder="{{::'account_settings_dateOfBirth_placeholder' | translate}}"/>

Sorry, I suck at markdown.

RobinHerbots commented 6 years ago

@S204STi ,

The inputformat is only supported as from version 4.x (still in beta) But you can install it from npm

S204STi commented 6 years ago

Oh gotcha. I'll try that.