Jquery Calendar Time Selection Suggestion

jQuery Calendar time selection suggestion

As I mentioned above, I ended up creating my own using good old tables and CSS.

Since this is a Rails app, I customize the HTML view on the server based on the available time slots. I also generate the week days and dates automatically using Ruby.

In the HAML view:

%table
  %thead
    %tr
      %th
        .day-of-week= Time.now.strftime("%A")
        .date= Time.now.strftime("%b %e")
      %th
        .day-of-week= (Time.now + 1.day).strftime("%A")
        .date= (Time.now + 1.day).strftime("%b %e")
      ...
  %tbody
    %tr
      - (1..7).each do
        %td.closed 6:00 am
    %tr
      - (1..7).each do
        %td.available 7:00 am
    ...

In the CSS:

table {
  border-collapse: separate;
  border-spacing: 20px 10px;

  tbody tr td {
    &.closed {
      color: lightgray;
    }

    &.unavailable {
      color: #777;
      background-color: lightgray;
      border-radius: 15px;
    }

    &.available {
      cursor: pointer;

      &:hover {
        color: white;
        background-color: blue;
        border-radius: 15px;
      }
    }
  }
}

Still working on the header image / css gradient, but the placeholder I used gives the right idea. I will also need to add a class and use the jQuery data tags to implement selecting a time slot, but that functionality will come. This question was mostly about the design of a control.

Here's my mostly finished product:

Add Day Before Cut Off Time To jquery.ui.datepicker

Since, jQuery DatePicker hasn't yet provided the functionality to support time(i guess) we need to do this in manual way.

You can use beforeShow options of jQuery DatePicker; which is called upon the datePicker UI display every time you click on DatePicker input field.

So, Inside beforeShow you can calculate the current time and manipulate the minDate as required ,

beforeShow : function(){
        var dateTime = new Date();
        var hour = dateTime.getHours();
        //If Hour is greater or equals to 8PM
        if(hour  >= 20){
            //Disable all past days including tomorrow and today
            $(this).datepicker( "option", "minDate", "+2" );
        }
    }

Here is the working demo.

P.S

1. I haven't tried this yet but you should look into this
   DateTimePicker plugin
   if you want a more subtle approach

Jquery calendar with only 30 days active for picking others should be disabled

Try this mate.Hope this might help you.. :)

$( "#datepicker" ).datepicker({
            minDate:'0',
            maxDate: '+1m',
    });

Fiddle

FYI

Datepicker API

minDate

maxDate

How to change the pop-up position of the jQuery DatePicker control

The accepted answer for this question is actually not for the jQuery UI Datepicker. To change the position of the jQuery UI Datepicker just modify .ui-datepicker in the css file. The size of the Datepicker can also be changed in this way, just adjust the font size.

How to Set the size & position of jquery Date picker calendar icon trigger image

Inspecting the element with firebug, I got this:

<img class="ui-datepicker-trigger" src="http://xxxxx/officeprime/assets/img/calendar.gif" alt="..." title="..."/>

eg:
button.ui-datepicker-trigger img

You can then work with that CSS class ui-datepicker-trigger.

jQuery UI Datepicker Rangeselect

As previous poster said, rangeSelect option was eliminated. However, the calendar widget whose rangeSelect option JQuery derived from is still available here:

http://keith-wood.name/datepick.html#range

---

Related Topics