Skip to content

Commit 60da49c

Browse files
author
maggiewachs
committed
Updated the datepicker workaround to be functional; also added a few style overrides and events to update the datepicker markup on load and click (necessary because it's redrawn)
1 parent 3a9652c commit 60da49c

File tree

1 file changed

+37
-16
lines changed

1 file changed

+37
-16
lines changed

‎experiments/ui-datepicker/index.html‎

Lines changed: 37 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,33 +3,54 @@
33
<head>
44
<meta charset="utf-8" />
55
<title>jQuery Mobile Framework - Datepicker</title>
6-
<link rel="stylesheet" href="../../themes/default" />
7-
<script type="text/javascript" src="../../js/"></script>
8-
6+
<link rel="stylesheet" href="../../themes/default" />
7+
<link rel="stylesheet" href="../../docs/_assets/css/jqm-docs.css" />
8+
<script type="text/javascript" src="../../js/"></script>
99
</head>
1010
<body>
1111

1212
<div data-role="page">
1313
<link rel="stylesheet" href="jquery.ui.datepicker.css" />
14+
<!-- style overrides -->
15+
<style type="text/css">
16+
.ui-datepicker-calendar th { padding-top: .3em; padding-bottom: .3em; }
17+
.ui-datepicker-calendar th span, .ui-datepicker-calendar span.ui-state-default { opacity: .3; }
18+
.ui-datepicker-calendar td a { padding-top: .5em; padding-bottom: .5em; }
19+
</style>
20+
1421
<script type="text/javascript" src="jQuery.ui.datepicker.js"></script>
1522
<script type="text/javascript">
1623
$(function(){
17-
/* datepicker workaround */
18-
$('input[type=date]').hide().after( $('<div />').datepicker() );
19-
$('.ui-datepicker-header').addClass('ui-body-c ui-corner-top').removeClass('ui-corner-all');
20-
$('.ui-datepicker-prev').buttonMarkup({iconpos: 'notext', icon: 'arrow-l', shadow: true, corners: true});
21-
$('.ui-datepicker-next').buttonMarkup({iconpos: 'notext', icon: 'arrow-r', shadow: true, corners: true});
22-
$('.ui-datepicker-calendar thead').remove();
23-
$('.ui-datepicker-calendar .ui-btn-text span').attr('class','');
24-
$('.ui-datepicker-calendar td').addClass('ui-btn-up-c');
25-
$('.ui-datepicker-calendar a').buttonMarkup({corners: false, shadow: false});
26-
/* // datepicker workaround */
24+
25+
/* datepicker workaround - update markup and classes for Mobile */
26+
var updateDatepicker = function(){
27+
$('.ui-datepicker-header').addClass('ui-body-c ui-corner-top').removeClass('ui-corner-all');
28+
$('.ui-datepicker-prev, .ui-datepicker-next').attr('href', '#');
29+
$('.ui-datepicker-prev').buttonMarkup({iconpos: 'notext', icon: 'arrow-l', shadow: true, corners: true});
30+
$('.ui-datepicker-next').buttonMarkup({iconpos: 'notext', icon: 'arrow-r', shadow: true, corners: true});
31+
$('.ui-datepicker-calendar th').addClass('ui-bar-c');
32+
$('.ui-datepicker-calendar td').addClass('ui-body-c');
33+
$('.ui-datepicker-calendar a').buttonMarkup({corners: false, shadow: false});
34+
$('.ui-datepicker-calendar a.ui-state-active').addClass('ui-btn-active'); // selected date
35+
$('.ui-datepicker-calendar a.ui-state-highlight').addClass('ui-btn-up-e'); // today's date
36+
$('.ui-datepicker-calendar .ui-btn').each(function(){
37+
var el = $(this), text = el.find('.ui-btn-text');
38+
el.html(text.text()); // remove extra button markup - necessary for date value to be interpreted correctly
39+
});
40+
};
41+
42+
/* create the datepicker as usual */
43+
$('input[type=date]').after( $('<div />').datepicker({ altField: '#date', showOtherMonths: true }) );
44+
45+
/* update the datepicker when it loads, or whenever it's clicked (required because it's redrawn) */
46+
updateDatepicker(); // if you show the datepicker on input focus, call updateDatepicker on the focus event instead
47+
$('.ui-datepicker').click(updateDatepicker);
48+
2749
});
2850
</script>
2951

3052
<div data-role="header">
31-
<h1>Datepicker Styled for mobile</h1>
32-
53+
<h1>Datepicker Styled for mobile</h1>
3354
</div>
3455

3556
<div data-role="content">
@@ -38,7 +59,7 @@ <h1>Datepicker Styled for mobile</h1>
3859
<form action="#" method="get">
3960

4061
<div data-role="fieldcontain">
41-
<label for="date">Date Input (non-functional):</label>
62+
<label for="date">Date Input:</label>
4263
<input type="date" name="date" id="date" value="" />
4364
</div>
4465

0 commit comments

Comments
 (0)