Tell us what you are trying to do?
howdy,
there are two thing i am struggling to change in my post forms and view filters, namely
1) adding a $ INSIDE a single line text field for (monetary) numeric inputs on specific custom fields on the left so is "clear" for users that they dont need to/shouldnt include the currency symbol themselves. I understand that since the single line field is shared for everything from text to normal numbers to, in limited circumstances, currency, so am fine doing this on a per custom field basis, but really would like to indicate with a currency symbol that it is not something a user should enter. Also, is there any way to allow commas, ie for thousands in the inputs? I found a support thread that helped convert the number to money on the display end, which works, but is good if they can enter normal numbers like ($)4,500.56 with comma as well.
and
2) changing the Date Picker input fields.... currently in a view there is a blank space where the field "would be" to theright of the calendar to select with..... but soon as a date is selected then the input field is also clickable to select a different date. I would like there to be a normal input field even before a date is selected. And in a post form the date picker field is shaded different from other input fields (thats easy enough to change) and IS clickable to select a date so i would like to get rid of the extra calendar (should be clear with the placeholder that a date goes there). In both instances i just want a normal input field, without a calendar next to it, that when selected opens the date picker popup like usual.....
Hello and thank you for contacting Toolset support.
1) I believe the best field type to use in this case, is the number field. This way, you will let the browser handle the user's input, and let him use comma or dot depending on the user's browser localization, but will provide a valid number for Toolset to save.
And you can include a $ symbol before the field shortcode inside the form. You may need to build the whole form-group input, instead of relying on the bootstrap output mode of the field shortcode. Does it make sense?
But if you want full control on the input field, you will need to use Javascript. Maybe using a mask/validation library. Something like:
- hidden link
- hidden link
- hidden link
2) I would suggest hiding the calendar image, either using CSS or custom Javascript and setting a placeholder for the input using custom Javascript code. Something like:
jQuery(function($){
$('input[name="wpcf-book-publish-date[display-only]"]').attr('placeholder', '2021/19/02');
$('.ui-datepicker-trigger').hide();
})
Assuming that the field's slug is 'book-publish-date'.
I hope this helps. Let me know if you have any questions.
thanks,
#2 is resolved but i am not clear on #1...... to be clear, i want the currency symbol $ to be INSIDE of the input field..... is easy enough to put "before" the input field but doesnt look clean/professional and having the currency symbol inside the field is pretty common for monetary numeric input fields.... hoping there is an easy trick to style a specific input field based on input name or field id so that it will work....
Well, if you want the $ symbol to be inside the input field, it will require custom Javascript code. Without Javascript code, I don't think it could be possible at all.
Both of the following libraries allow that. However, please note that you will be using on your own risk, we do not endorse, nor recommend any of them, we suggested this as an example:
- Check the 3rd example here, especially the "prefix" option hidden link
- Check the demonstration of this library, it adds the $ symbol and keeps it inside the input while the user enters numbers hidden link
My issue is resolved now. Thank you!
