Avoid duped datepicker
[bus.git] / busui / js / jquery.ui.datepicker.mobile.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
/*
* jQuery Mobile Framework : temporary extension to port jQuery UI's datepicker for mobile
* Copyright (c) jQuery Project
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*/
(function($, undefined ) {
 
        //cache previous datepicker ui method
        var prevDp = $.fn.datepicker;
        
        //rewrite datepicker
        $.fn.datepicker = function( options ){
                
                var dp = this;
        
                //call cached datepicker plugin
                prevDp.call( this, options );
                
                //extend with some dom manipulation to update the markup for jQM
                //call immediately
                function updateDatepicker(){
                        $( ".ui-datepicker-header", dp ).addClass("ui-body-c ui-corner-top").removeClass("ui-corner-all");
                        $( ".ui-datepicker-prev, .ui-datepicker-next", dp ).attr("href", "#");
                        $( ".ui-datepicker-prev", dp ).buttonMarkup({iconpos: "notext", icon: "arrow-l", shadow: true, corners: true});
                        $( ".ui-datepicker-next", dp ).buttonMarkup({iconpos: "notext", icon: "arrow-r", shadow: true, corners: true});
                        $( ".ui-datepicker-calendar th", dp ).addClass("ui-bar-c");
                        $( ".ui-datepicker-calendar td", dp ).addClass("ui-body-c");
                        $( ".ui-datepicker-calendar a", dp ).buttonMarkup({corners: false, shadow: false}); 
                        $( ".ui-datepicker-calendar a.ui-state-active", dp ).addClass("ui-btn-active"); // selected date
                        $( ".ui-datepicker-calendar a.ui-state-highlight", dp ).addClass("ui-btn-up-e"); // today"s date
                $( ".ui-datepicker-calendar .ui-btn", dp ).each(function(){
                                var el = $(this);
                                // remove extra button markup - necessary for date value to be interpreted correctly
                                el.html( el.find( ".ui-btn-text" ).text() ); 
                });
                };
                
                //update now
                updateDatepicker();
                
                // and on click
                $( dp ).click( updateDatepicker );
                
                //return jqm obj 
                return this;
        };
                
        //bind to pagecreate to automatically enhance date inputs       
        $( ".ui-page" ).live( "pagecreate", function(){         
                $( "input[type='date'], input[data-type='date']" ).each(function(){
                        $(this).after( $( "<div />" ).datepicker({ altField: "#" + $(this).attr( "id" ), showOtherMonths: true }) );
                });     
        });
})( jQuery );