Drag pointers until desired date and time gets displayed.
Change values at start, setting the data attributes for each canvas or setting the option start.
<div id="calendar-container-id" class="round-date-selector" data-year="2013" data-month="4" data-day="16">
[...]
</div>
<div id="clock-container-id" class="round-date-selector" data-hour="8" data-minute="13">
[...]
</div>
<script>
var dateSlider = DateSlider('calendar-container-id', {option: 'value'});
var clockSlider = ClockSlider('clock-container-id', {option: 'value'});
</script>Option start can contain values accepted by Date.parse(). start option of Clockslider does not need a preceding date.
Set locale option to change language. Valid options are parameters of Date.toLocaleDateString().
Add format option if necessary. Following characters inside the format string get replaced:
| format character | value |
|---|---|
d |
day [01-31] |
m |
month [01-12] |
y |
year |
b |
month short name [Jan-Dec] |
B |
month long name [January-December] |
a |
day short name [Mon-Sun] |
A |
day long name [Monday-Sunday] |
H |
hour [00-23] |
M |
minute [00-59] |
Events available are onMove and onChange.
DateSlider(
'calendar-container-id',
{
start: '21 Oct 2011',
locale: ['en-US', {weekday: 'short', year: 'numeric', month: 'short', day: 'numeric'}],
format: 'a, d. b y',
onChange: function (event) {
console.log(event.value, event.day, event.month, event.year);
}
}
);
ClockSlider(
'clock-container-id',
{
start: '00:00',
format: 'Hh Mm',
onMove: function (event) {
event.preventDefault();
console.log(event.value, event.hour, event.minute);
}
}
);Selected date and time values are stored inside input fields as ISO 8601 format. Years from 1 to 9999.
<input class="date-input" type="hidden" name="date" value="2013-08-14">
<input class="clock-input" type="hidden" name="time" value="03:00">Modify colors by changing svg attributes stroke, fill and setting options c1slidecolor, c2slidecolor on ClockSlider.
<circle cx="105" cy="105" r="80" stroke="darkolivegreen" stroke-width="1" fill="white" />
<script>
ClockSlider(
'clock-container-id',
{
c1slidecolor: 'rgba(56, 131, 37, 1)',
c2slidecolor: 'rgba(194, 25, 25, 1)'
}
);
</script>Disable selector and adjust current time every 1 second.
var dateSlider = DateSlider('calendar-container-id', {
onMove: function (event) {
event.preventDefault();
}
});
var clockSlider = ClockSlider('clock-container-id', {
onMove: function (event) {
event.preventDefault();
}
});
function setDate(date) {
clockSlider.hour = date.getHours();
clockSlider.minute = date.getMinutes();
clockSlider.update();
dateSlider.day = date.getDate();
dateSlider.month = date.getMonth();
dateSlider.year = date.getFullYear();
dateSlider.update();
}
setDate(new Date());
setInterval(function () { setDate(new Date()); }, 1000);