You are viewing limited content. For full access, please sign in.

Question

Question

Date field formatting in forms

asked on March 13, 2016 Show version history

Hello,

I have a date field:

I'd like to know how to:

> take control over the **input** font size (sort of '#q32 .cf-field {font-size: 18px;}')

> hide the calendar icon so user must type the digits

> put in place the new date format yyyy/MM/dd

 

Thanks to you folks in advance

0 0

Answer

SELECTED ANSWER
replied on March 14, 2016

Jennifer is right about your 1st point. For the 2nd, you should do something like #q32 img.ui-datepicker-trigger {display:none!important} in the CSS. For the 3rd part, I would use several bits of javascript to change the momentpattern attribute, perhaps set a placeholder text to give the user some guidance, and remove the hasDatepicker class from the input so the datepicker dialog doesn't show up either. All in all, you should have this:

CSS

#q32 input {font-size:18px}
#q32 img.ui-datepicker-trigger {display:none!important}

Javascript

$(document).ready(function(){
  $('#q32 input').attr('momentpattern','YYYY/MM/DD');
  $('#q32 input').attr('placeholder','YYYY/MM/DD');
  $('#q32 input').removeClass('hasDatepicker');
});

 

0 0
replied on March 14, 2016

Thank you Scott for the info as it works great !

 

Altogether with Javascript code:

$.getScript('http://GDFSLF01/Forms/js/jquery.mask.min.js', function () {
  $('.date  input').mask('9999/99/99');
});

...users don't need to type slashes...

0 0

Replies

replied on March 13, 2016

As far as the size of the input - #q32 input {font-size: 20px}.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.