diff options
| author | Luke Shumaker <lukeshu@sbcglobal.net> | 2016-12-13 14:12:55 -0500 |
|---|---|---|
| committer | Luke Shumaker <lukeshu@sbcglobal.net> | 2016-12-13 21:41:38 -0500 |
| commit | e7bacd45e1b44090781067159b63fe14b46b8611 (patch) | |
| tree | d291a561cd58d4e42536b76d9ec91d26d72a87a5 /docs/examples | |
| parent | 85a578479406865502a3eb504577c1dfe64f34f5 (diff) | |
Use HTML5 type=datetime-local inputs for ChartCoordinator.
Diffstat (limited to 'docs/examples')
| -rw-r--r-- | docs/examples/assets/css/jquerytools.dateinput.skin1.css | 157 | ||||
| -rw-r--r-- | docs/examples/index.html | 26 |
2 files changed, 6 insertions, 177 deletions
diff --git a/docs/examples/assets/css/jquerytools.dateinput.skin1.css b/docs/examples/assets/css/jquerytools.dateinput.skin1.css deleted file mode 100644 index 2f77f6e..0000000 --- a/docs/examples/assets/css/jquerytools.dateinput.skin1.css +++ /dev/null @@ -1,157 +0,0 @@ -/* Skin for jQuery Tools dateinput. - * - * Based on <https://github.com/jquerytools/jquerytools.github.com/blob/master/media/css/dateinput/skin1.css>. - * - * Documentation on dateinput skinning: <http://jquerytools.github.io/documentation/dateinput/index.html#skinning> - */ - -/* the input field */ -.date { - border:1px solid #ccc; - font-size:18px; - padding:4px; - text-align:center; - width:194px; - - box-shadow:0 0 10px #eee inset; - -moz-box-shadow:0 0 10px #eee inset; - -webkit-box-shadow:0 0 10px #eee inset; -} - -/* calendar root element */ -#calroot { - margin-top:-1px; - width:198px; - padding:2px; - background-color:#fff; - font-size:11px; - border:1px solid #ccc; - - border-radius:5px; - -moz-border-radius:5px; - -webkit-border-radius:5px; - - box-shadow: 0 0 15px #666; - -moz-box-shadow: 0 0 15px #666; - -webkit-box-shadow: 0 0 15px #666; -} - -/* head. contains title, prev/next month controls and possible month/year selectors */ -#calhead { - padding:2px 0; - height:22px; -} - -#caltitle { - font-size:14px; - color:#0150D1; - float:left; - text-align:center; - width:155px; - line-height:20px; - text-shadow:0 1px 0 #ddd; -} - -#calnext, #calprev { - display:block; - width:20px; - height:20px; - background:transparent url(../icons/prev.gif) no-repeat scroll center center; - float:left; - cursor:pointer; -} - -#calnext { - background-image:url(../icons/next.gif); - float:right; -} - -#calprev.caldisabled, #calnext.caldisabled { - visibility:hidden; -} - -/* year/month selector */ -#caltitle select { - font-size:10px; -} - -/* names of the days */ -#caldays { - height:14px; - border-bottom:1px solid #ddd; -} - -#caldays span { - display:block; - float:left; - width:28px; - text-align:center; -} - -/* container for weeks */ -#calweeks { - background-color:#fff; - margin-top:4px; -} - -/* single week */ -.calweek { - clear:left; - height:22px; -} - -/* single day */ -.calweek a { - display:block; - float:left; - width:27px; - height:20px; - text-decoration:none; - font-size:11px; - margin-left:1px; - text-align:center; - line-height:20px; - color:#666; - border-radius:3px; - -moz-border-radius:3px; - -webkit-border-radius:3px; -} - -/* different states */ -.calweek a:hover, .calfocus { - background-color:#ddd; -} - -/* sunday */ -a.calsun { - color:red; -} - -/* offmonth day */ -a.caloff { - color:#ccc; -} - -a.caloff:hover { - background-color:rgb(245, 245, 250); -} - - -/* unselecteble day */ -a.caldisabled { - background-color:#efefef !important; - color:#ccc !important; - cursor:default; -} - -/* current day */ -#calcurrent { - background-color:#498CE2; - color:#fff; -} - -/* today */ -#caltoday { - background-color:#333; - color:#fff; -} diff --git a/docs/examples/index.html b/docs/examples/index.html index b86fe91..44fae85 100644 --- a/docs/examples/index.html +++ b/docs/examples/index.html @@ -9,7 +9,6 @@ <link rel="stylesheet" type="text/css" href="assets/css/style.css" /> <link rel="stylesheet" type="text/css" href="assets/css/jquerytools.tabs.tabs-no-images.css" /> - <link rel="stylesheet" type="text/css" href="assets/css/jquerytools.dateinput.skin1.css" /> <script type="text/javascript" src="assets/js/dependencies.js"></script> <script type="text/javascript" src="../../jarmon/jarmon.js"></script> @@ -20,26 +19,13 @@ <body> <div class="chartRangeControl"> <form> - <div> - <span class="timerange_control custom"> - <img src="assets/icons/calendar.png" width="16" height="16" alt="calendar" class="from_custom" - title="Click to choose a custom start date" /> - <input name="from_custom" type="text" readonly="readonly" - title="Time range start" /> - <img src="assets/icons/calendar.png" width="16" height="16" alt="calendar" class="to_custom" - title="Click to choose a custom end date" /> - <input name="to_custom" type="text" readonly="readonly" - title="Time range end" /> + <div class="range-inputs"> + <span class="custom"> + <input name="from" type="datetime-local" step="1" /> + <input name="to" type="datetime-local" step="1" /> </span> - <span class="timerange_control standard"> - <select name="from_standard" - title="Time range shortcuts - click to select an alternative time range" > - </select> - </span> - <input name="from" type="hidden" /> - <input name="to" type="hidden" /> - <select name="tzoffset" - title="Timezone offset - click to choose a custom timezone offset" ></select> + <select name="shortcuts" title="Time range shortcuts - click to select an alternative time range" ></select> + <select name="tzoffset" title="Timezone offset - click to choose a custom timezone offset" ></select> <input name="action" value="Update" type="button" title="Graph update - click to update all graphs" /> </div> |