Monkey patching datepicker experiment.

Just a quick post. Datepicker doesn’t work on jQm 1.0. Please checkout this page first if interested in using the datepicker.

monkey patch for jquery mobile datepicker experiment (included in alpha version of jqm), quick and dirty.

the js:

$( "body" ).live( "pagechange", function() {
    $( "input[type='date'], input:jqmData(type='date')" ).each(function(){
        
        var $this = $(this),
            $prev = $this.prev();
        
        $this
            .addClass( 'ui-input-text ui-body-a ui-corner-all ui-shadow-inset' )
            .after( $( "" )
            .datepicker({ altField: "#" + $(this).attr( "id" ), showOtherMonths: true }) );
        
        if( $prev.is( 'label' ) ) {
            $this.prev().addClass( 'ui-input-text' );
        }
    });	
});

Had to change the event from pagecreate to pagechange as sometimes pagecreate got fired twice. Didn’t jump in, maybe a bug, maybe my fault. It’s working for me so I care about that if times are less busy.

the css:

Be sure you downloaded the demos .ui-icon background image as well and change your image background path for the last css rule to your local destination.

div.hasDatepicker {
    display: block;
    margin: 8px 0;
    overflow: visible;
    padding: 0;
    width: 100%;
}
div.hasDatepicker .ui-datepicker {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
}
.ui-datepicker {
    margin: 0;
    max-width: 500px;
    overflow: visible;
}
.ui-datepicker .ui-datepicker-header {
    border-bottom: 0 none;
    font-weight: bold;
    padding: 0.4em 0;
    position: relative;
}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    margin-top: 0;
    padding: 1px 0 1px 2px;
    position: absolute;
    text-indent: -9999px;
    top: 0.5em;
}
.ui-datepicker .ui-datepicker-prev {
    left: 6px;
}
.ui-datepicker .ui-datepicker-next {
    right: 6px;
}
.ui-datepicker .ui-datepicker-title {
    line-height: 1.8em;
    margin: 0 2.3em;
    text-align: center;
}
.ui-datepicker .ui-datepicker-title select {
    font-size: 1em;
    margin: 1px 0;
}
.ui-datepicker select.ui-datepicker-month-year {
    width: 100%;
}
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
    width: 49%;
}
.ui-datepicker table {
    border-collapse: collapse;
    margin: 0;
    width: 100%;
}
.ui-datepicker td {
    border-width: 1px;
    padding: 0;
    text-align: center;
}
.ui-datepicker td span, .ui-datepicker td a {
    border-width: 0;
    display: block;
    font-weight: bold;
    margin: 0;
    padding: 0.2em 0;
    text-align: center;
    text-decoration: none;
}

.hasDatepicker .ui-btn-inner {
    width: 18px;
    height: 18px;
}

.hasDatepicker .ui-btn-text {
    display: none !important;
}
.hasDatepicker .ui-icon-arrow-r {
    background-position: -108px 50% !important;
}
.hasDatepicker .ui-icon-arrow-l {
    background-position: -144px 50% !important;
}
.hasDatepicker .ui-datepicker .ui-datepicker-prev span,
.hasDatepicker .ui-datepicker .ui-datepicker-next span {
    left: 44% !important;
    top: 42% !important;
}
.hasDatepicker .ui-icon {
    background-image: url( "/img/icons-18-white.png" ) !important;
}

Have fun with jQuery mobile ;)