What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Setting up Sunday as the start of the week in Date Reservation widget

    Asked by hdenton on April 12, 2016 at 12:28 PM

    Is there any CSS I can use to make my Date Reservation Widget begin on Sunday instead of Monday?

     

    Thanks!

    start date start reservation widget
  • Profile Image

    Answered by Ben on April 12, 2016 at 02:01 PM

    This is an interesting question, and quite possible as well :)

    You can see how it would look by checking out the following form: https://form.jotform.com/61023862777965

    Basically we just move them all to the right and then move the Sunday to the left, but there is a catch. Since Sunday is on the far right, it is not possible to simply put it on far left and have it look OK, so we need to push it down as well (You can see this on all months, but May is interesting).

    Basically if the Sunday is first, the empty row is show at the top (not possible to remove).

    Another interesting thing is that if the Sunday is the last month, it would jump out of the widget space (shown in July) which we can counter by adding enough space for it all of the time.

    The following code does the mentioned - and as shown on the form above:

    .ui-datepicker-calendar th {
        left: 38px;
        position: relative;
    }
    .ui-datepicker-calendar td {
        left: 35px;
        position: relative;
    }
    .ui-datepicker-calendar td:last-child {
        left: -227px;
        top: 28px;
    }
    .ui-datepicker-calendar th:last-child {
        left: -225px;
    }
    #reservationContainer > div {
        height: 240px;
    }

    You only need to add the same to the widgets custom CSS (not the form's).

    Do let us know how it goes and if that is what you had in mind.

  • Profile Image

    Answered by hdenton on April 12, 2016 at 02:18 PM

    Hey Ben! I think that will probably work for me, thanks! It looks a little weird because of the column Sunday being slightly off from the rest of the rows. But over all, I like it and I think my users will too.

     

    Thanks!

    Holly

  • Profile Image

    Answered by Ben on April 12, 2016 at 02:57 PM

    You are right Holly, good eyes :)

    I have missed that one pixel going down of the row and 3 pixels on the days, but I have sorted the same out now, so this is the final code (form mentioned earlier is updated to check it out):

    .ui-datepicker-calendar th, .ui-datepicker-calendar td {
        left: 35px;
        position: relative;
    }
    .ui-datepicker-calendar td:last-child {
        left: -227px;
        top: 27px;
    }
    .ui-datepicker-calendar th:last-child {
        left: -227px;
    }
    #reservationContainer > div {
        height: 240px;
    }

    This is how it looks now:

  • Profile Image

    Answered by hdenton on April 12, 2016 at 03:03 PM

    Must be the LASIK. Perfect! However, is there something in this CSS that also gray's out the selection of dates that someone has already chosen? This seems to be happening.

  • Profile Image

    Answered by Ben on April 12, 2016 at 03:34 PM

    No, the widget in my form is the one with default settings, so the dates that can be selected are up to the setup itself.

    I do however presume that you mean about the selected dates that were selected in some other submission.

    This is the default way the widget works - so that one date (that was not previously selected) can be reserved.

    This is great if you need to make appointments on per day basis.

    Are you looking for some other functionality?

  • Profile Image

    Answered by hdenton on April 12, 2016 at 03:40 PM

    Oh I didn't realize that :-/ I may need a different widget then.

    I'm using it for employees to select dates they will be at meetings or trainings so some will definitely overlap or be on the same dates. Do you have any suggestions?
  • Profile Image

    Answered by Ben on April 12, 2016 at 03:48 PM

    OK, this means that you are after some date entry widget instead. For this reason I have moved this to a new thread to avoid any confusion (since my colleagues would get assigned to this as well, so this allows us to follow up easily).

    There we will help you with few different options that you might use.

    This is the link to the new thread: https://www.jotform.com/answers/816749

    I will follow up on the same shortly.

  • Profile Image

    Answered by springbackco on July 21, 2016 at 03:29 PM

    Thanks! Also, is there a way to exclude certain days (like Wednesdays) from getting selected? We offer deliveries Monday, Tuesday, Thursday and Friday, but not on weekends, which we can turn off, but is there a way to turn off a specific weekday from being selected?
     
  • Profile Image

    Answered by victor on July 21, 2016 at 04:16 PM

    To assist you better I have created a new thread that will be answered shortly by our support team

    https://www.jotform.com/answers/888141

     

  • Profile Image

    Answered by wolfpaw69 on September 06, 2016 at 12:00 AM

    That's awesome.  I've been wanting that for awhile now.  Works great!