How to use a date picker in JotForm?

  • Profile Image
    cami_019
    Asked on January 10, 2017 at 02:57 AM

    Hello, How to insert an angle down image after the the labels just like below (accommodation, start date, and end date)?

     

  • Profile Image
    seth
    Answered on January 10, 2017 at 05:21 AM

    Hello,

    As I understand you want a drop-down date-picker. Please use date field instead of text box. The basic date field has a look like this, I don't think it will suit your design needs:

    There are also widgets that are datepickers. Please have a look at them in the left menu under more fields option:

    I preapared a CSS code for you. I think you can use this date picker on your form, but it will make other fields move around when it is opened. Please test it out. Please add Date Picker widget, which is the first option on the above image. Then add this CSS code into the widget CSS:

     

    Here is the Widget Css Code:

     

    .form-control {

    width:80px !important;

    font-size: x-small !important;

    }

     

    Also you need to inject this code to your form:

     

    #cid_20{

    width:120px !important;

    }

     

    Here is a guide about how inject CSS to your form:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

     

    Also please have a look at large date picker widget. It is also a good looking date picker.

    I hope this answer helps. Please don't hesitate to contact us for your further queries.

     

    All the best!

    PS: If you would like to code to change basic date picker appearance with CSS, have a look at this thread https://www.jotform.com/answers/73071.