Jquery ui datepicker a common gotcha

This post is just to keep me reminding about a jquery datepicker issue.

If you have multiple jqerury ui datepicker with the same html ID, then you are done for. Crazy behavior is observed then. Don't set id to input for datepicker if you have multiple of them, or just assign a new id to each of them.

Date time stamp using jquery ui framework

If you are using jquery ui framework then you can show you date time in a cool way. The final result will look like this,

It will of course depend on what theme you are using. Here it goes.

HTML

Apr ´10
    

25th


1:05 pm

CSS

.date {
 width: 55px;
 text-align:center;
 font-family: cursive;
}

.date .ui-widget-header {
 padding: 2px 5px 2px 5px;
 font-size: .9em !important;
}

.day, .time {
 font-size: .8em !important;
}

.date hr {
 margin: 0px;
 border: 0;
 height: 1px;
 background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(31,52,60,0.75), rgba(0,0,0,0)); 
 background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(31,52,60,0.75), rgba(0,0,0,0)); 
 background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(31,52,60,0.75), rgba(0,0,0,0)); 
 background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(31,52,60,0.75), rgba(0,0,0,0));
}

sup, sub {
 vertical-align: baseline;
 position: relative;
 top: -0.4em;
}
sub { top: 0.4em; }

The style of hr element will of course vary for different theme.