[eluser]fourcs[/eluser]
:question: Anyone have any luck getting a datepicker script to work with current codercrafter generated code?
This is a snip of my header code; script type tags are removed below for some reason here, not in my code. The script url path should have been processed since the css url path was picked up.
Code:
[removed][removed]
[removed][removed]
[removed]
window.addEvent('domready', function() { myCal = new Calendar({ dateB: 'Y-m-d' }); });
[removed]
[removed]
window.addEvent('domready', function() { myCal = new Calendar({ dateE: 'Y-m-d' }); });
[removed]
This is a snip of my css code:
Code:
<style type="text/css">
/* calendar.css */
<!--
.hidden {
opacity: 0;
position: absolute;
}
.visible {
opacity: 1;
}
input.calendar {
width: 120px;
float: left;
float:none;
margin-right: 6px;
margin-left: 25px;
margin-left: 0;
}
.timeOfDay {
margin-left: 25px;
margin-left: 0px;
font-weight: bold;
clear: both;
display: block;
}
button.calendar {
background: url(<?= base_url();?>img/calendar-icon.gif);
border: 0;
cursor: pointer;
float: left;
float:none;
height: 20px;
margin-right: 6px;
width: 20px;
margin-bottom: 3px;
}
button.calendar:hover,
button.calendar.active {
background-position: 0 20px;
}
div.calendar {
background: url(<?= base_url();?>img/calendar.png);
height: 195px;
padding: 0 6px;
text-align: center;
width: 147px;
}
div.calendar * {
margin: 0;
padding: 0;
}
div.calendar div {
background: none !important;
cursor: move;
height: 185px;
overflow: hidden;
padding-top: 10px;
position: relative;
width: 147px;
}
div.calendar caption {
color: #333;
font: normal 12px/16px Arial, Helvetica, sans-serif;
padding-top: 6px;
text-align: center;
width: 100%;
}
div.calendar caption a {
cursor: pointer;
display: block;
height: 12px;
overflow: hidden;
position: absolute;
text-indent: -100px;
top: 17px;
width: 11px;
}
div.calendar caption a.prev {
background-image: url(<?= base_url();?>img/calendar-prev.gif);
left: 0;
}
div.calendar caption a.next {
background-image: url(<?= base_url();?>img/calendar-next.gif);
right: 0;
}
div.calendar caption a:hover {
background-position: 0 12px;
}
div.calendar caption span {
height: 25px;
position: relative;
text-align: center;
}
div.calendar caption span.month {
padding-right: 8px;
}
div.calendar caption span.month:after {
content: ',';
}
div.calendar table {
background: #FFF;
border: 0;
border-collapse: collapse;
border-spacing: 0;
cursor: default;
margin: 0 auto;
overflow: hidden;
width: 147px;
}
div.calendar td,
div.calendar th {
border: 0;
color: #6dba4b;
font: normal 12px Arial, Helvetica, sans-serif;
height: 21px;
text-align: center;
width: 21px;
}
div.calendar td {
background: url(<?= base_url();?>img/calendar-td.gif);
color: #FFF;
font-size: 11px;
}
div.calendar td.invalid {
color: #999;
}
div.calendar td.valid {
background: url(<?= base_url();?>img/calendar-valid.gif);
color: #6dba4b;
cursor: pointer;
}
div.calendar td.hilite {
background: url(<?= base_url();?>img/calendar-hilite.gif);
}
div.calendar td.inactive {
background: url(<?= base_url();?>img/calendar-td.gif) 0 100%;
color: #FFF;
}
div.calendar td.active,
div.calendar td.hover {
background: url(<?= base_url();?>img/calendar-valid.gif) 0 100%;
color: #FFF;
cursor: pointer;
}
-->
</style>
