How to use a date picker in JotForm?

  • cami_019
    Asked on January 10, 2017 at 2:57 AM

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

     

    How to use a date picker in JotForm? Image 1 Screenshot 20

  • seth
    Replied on January 10, 2017 at 5: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:

    How to use a date picker in JotForm? Image 1 Screenshot 40

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

    How to use a date picker in JotForm? Image 2 Screenshot 51

    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:

    How to use a date picker in JotForm? Image 3 Screenshot 62

     

    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.