Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Added template composition example (with $data. prefix workaround).

  • Loading branch information...
commit 31f52bdce68490312e0035dd4be8ef721af59eb7 1 parent 5e980d1
@jzaefferer jzaefferer authored
View
205 datepicker-rewrite/alternative-template.html
@@ -0,0 +1,205 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <script src="../jquery-1.4.4.js"></script>
+ <script src="../ui/jquery.ui.core.js"></script>
+ <script src="../ui/jquery.ui.widget.js"></script>
+ <script src="../ui/jquery.ui.button.js"></script>
+ <script src="../ui/jquery.ui.position.js"></script>
+ <script src="jquery.tmpl.js"></script>
+ <script src="../external/jquery.global.js"></script>
+ <script src="../external/jquery.global.de-DE.js"></script>
+ <script src="../external/jquery.global.ja-JP.js"></script>
+ <script src="localization.js"></script>
+ <script src="date.js"></script>
+ <script src="picker.js"></script>
+ <link rel="stylesheet" href="../themes/base/jquery.ui.all.css">
+ <title>jQuery UI Datepicker Rewrite</title>
+ <style>
+ body { font:62.5% Verdana,Arial,sans-serif; }
+ .ui-datepicker-multi-3 { width: 51em !important; }
+ </style>
+</head>
+<body>
+ <select id="culture">
+ <option value="en-US">en-US</option>
+ <option value="de-DE">de-DE</option>
+ <option value="ja-JP">ja-JP</option>
+ </select>
+ <input id="inline-output" />
+ <div id="datepicker-inline-default"></div>
+ <div id="datepicker-inline-multi"></div>
+ <div id="datepicker-inline"></div>
+ <input id="datepicker" type="text" />
+ <input id="datepicker2" type="text" />
+ <script>
+ $( function() {
+ $( "#culture" ).change( function() {
+ $.global.preferCulture( $( this ).val() );
+ $( ":ui-datepicker" ).datepicker( "refresh" );
+ })
+ $( "#datepicker-inline-default" ).datepicker( {
+ select: function( event, ui ) {
+ $( "#inline-output" ).val( ui.date );
+ }
+ });
+ $( "#datepicker-inline-multi" ).datepicker( {
+ tmpl: "#ui-datepicker-multi-tmpl",
+ select: function( event, ui ) {
+ $( "#inline-output" ).val( ui.date );
+ }
+ })
+ $( "#datepicker-inline" ).datepicker( {
+ tmpl: "#ui-datepicker-weeks-tmpl",
+ select: function( event, ui ) {
+ $( "#inline-output" ).val( ui.date );
+ },
+ eachDay: function( day ) {
+ if ( day.lead && day.date > 20 ) {
+ day.selectable = false;
+ day.render = true;
+ day.title = "These are the days of last month";
+ day.extraClasses = "ui-state-disabled";
+ }
+ if ( day.lead && day.date < 3 ) {
+ day.selectable = true;
+ day.render = true;
+ day.extraClasses = "ui-state-disabled";
+ }
+ if ( day.date == 1 ) {
+ day.extraClasses = "ui-state-error";
+ day.title = "Something bad explaining the error highlight";
+ }
+ if ( day.today ) {
+ day.title = "A good day!";
+ }
+ }
+ });
+ $( "#datepicker, #datepicker2" ).datepicker();
+ });
+ </script>
+
+ <script id="ui-datepicker-month" type="text/x-jquery-tmpl">
+ <table class="ui-datepicker-calendar">
+ <thead>
+ <tr>
+ {{each(index, day) $data.weekdays()}}
+ <th class=""><span title="${day.fullname}">${day.shortname}</span></th>
+ {{/each}}
+ </tr>
+ </thead>
+ <tbody>
+ {{each(index, week) $data.days()}}
+ <tr>
+ {{each(index, day) week.days}}
+ <td>
+ {{if day.render}}
+ {{if day.selectable}}
+ <a title="${day.title}" class="ui-state-default{{if day.current}} ui-state-active{{/if}}{{if day.today}} ui-state-highlight{{/if}} ${day.extraClasses}" href="#">
+ ${day.date}
+ </a>
+ {{/if}}
+ {{if !day.selectable}}
+ <span title="${day.title}" class="{{if day.current}} ui-state-active{{/if}}{{if day.today}} ui-state-highlight{{/if}} ${day.extraClasses}">
+ ${day.date}
+ </span>
+ {{/if}}
+ {{/if}}
+ </td>
+ {{/each}}
+ </tr>
+ {{/each}}
+ </tbody>
+ </table>
+ </script>
+
+ <script id="ui-datepicker-tmpl" type="text/x-jquery-tmpl">
+ <div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
+ <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
+ <a class="ui-datepicker-prev ui-corner-all" title="${labels.prevText}"><span class="ui-icon ui-icon-circle-triangle-w">${labels.prevText}</span></a>
+ <a class="ui-datepicker-next ui-corner-all" title="${labels.nextText}"><span class="ui-icon ui-icon-circle-triangle-e">${labels.nextText}</span></a>
+ <div class="ui-datepicker-title">
+ <span class="ui-datepicker-month">${date.monthname()}</span> <span class="ui-datepicker-year">${date.year()}</span>
+ </div>
+ </div>
+ {{tmpl(date) "#ui-datepicker-month"}}
+ <div class="ui-datepicker-buttonpane ui-widget-content">
+ <button class="ui-datepicker-current">${labels.currentText}</button>
+ <button class="ui-datepicker-close">${labels.closeText}</button>
+ </div>
+ </div>
+ </script>
+
+ <script id="ui-datepicker-weeks-tmpl" type="text/x-jquery-tmpl">
+ <div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
+ <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
+ <a class="ui-datepicker-prev ui-corner-all" title="${labels.prevText}"><span class="ui-icon ui-icon-circle-triangle-w">${labels.prevText}</span></a>
+ <a class="ui-datepicker-next ui-corner-all" title="${labels.nextText}"><span class="ui-icon ui-icon-circle-triangle-e">${labels.nextText}</span></a>
+ <div class="ui-datepicker-title">
+ <span class="ui-datepicker-month">${date.monthname()}</span> <span class="ui-datepicker-year">${date.year()}</span>
+ </div>
+ </div>
+ <table class="ui-datepicker-calendar">
+ <thead>
+ <tr>
+ <th>${labels.weekHeader}</th>
+ {{each(index, day) date.weekdays()}}
+ <th class=""><span title="${day.fullname}">${day.shortname}</span></th>
+ {{/each}}
+ </tr>
+ </thead>
+ <tbody>
+ {{each(index, week) date.days()}}
+ <tr>
+ <td>${week.number}</td>
+ {{each(index, day) week.days}}
+ <td>
+ {{if day.render}}
+ {{if day.selectable}}
+ <a title="${day.title}" class="ui-state-default{{if day.current}} ui-state-active{{/if}}{{if day.today}} ui-state-highlight{{/if}} ${day.extraClasses}" href="#">
+ ${day.date}
+ </a>
+ {{/if}}
+ {{if !day.selectable}}
+ <span title="${day.title}" class="{{if day.current}} ui-state-active{{/if}}{{if day.today}} ui-state-highlight{{/if}} ${day.extraClasses}">
+ ${day.date}
+ </span>
+ {{/if}}
+ {{/if}}
+ </td>
+ {{/each}}
+ </tr>
+ {{/each}}
+ </tbody>
+ </table>
+ </div>
+ </script>
+
+ <script id="ui-datepicker-multi-tmpl" type="text/x-jquery-tmpl">
+ <div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-datepicker-multi-3 ui-datepicker-multi">
+ {{each(index, month) date.months(2)}}
+ <div class="ui-datepicker-group">
+ <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix {{if month.first}}ui-corner-left{{/if}}{{if month.last}}ui-corner-right{{/if}}">
+ {{if month.first}}
+ <a class="ui-datepicker-prev ui-corner-all" title="${labels.prevText}"><span class="ui-icon ui-icon-circle-triangle-w">${labels.prevText}</span></a>
+ {{/if}}
+ {{if month.last}}
+ <a class="ui-datepicker-next ui-corner-all" title="${labels.nextText}"><span class="ui-icon ui-icon-circle-triangle-e">${labels.nextText}</span></a>
+ {{/if}}
+ <div class="ui-datepicker-title">
+ <span class="ui-datepicker-month">${month.monthname()}</span> <span class="ui-datepicker-year">${month.year()}</span>
+ </div>
+ </div>
+ {{tmpl(month) "#ui-datepicker-month"}}
+ </div>
+ {{/each}}
+ <div class="ui-datepicker-row-break"></div>
+ <div class="ui-datepicker-buttonpane ui-widget-content">
+ <button class="ui-datepicker-current">${labels.currentText}</button>
+ <button class="ui-datepicker-close">${labels.closeText}</button>
+ </div>
+ </div>
+ </script>
+</body>
+</html>
View
1  datepicker-rewrite/index.html
@@ -22,6 +22,7 @@
</style>
</head>
<body>
+ <a href="alternative-template.html">Alternative templating example</a>
<select id="culture">
<option value="en-US">en-US</option>
<option value="de-DE">de-DE</option>
Please sign in to comment.
Something went wrong with that request. Please try again.