Подключаем jQuery и плагин со стилями:

<script src="js/jquery.js" type="text/javascript"></script> <script src="js/colorpicker.js" type="text/javascript"></script>

Скрипт:

$(document).ready(function(){

$('#colorpickerHolder').ColorPicker({flat: true});

$('#colorpickerField').ColorPicker({
onSubmit: function(hsb, hex, rgb) {
$('#colorpickerField').val(hex);
},
onBeforeShow: function () {
$(this).ColorPickerSetColor(this.value);
}
})
.bind('keyup', function(){
$(this).ColorPickerSetColor(this.value);
});

$('#colorSelector').ColorPicker({
color: '#0000ff',
onShow: function (colpkr) {
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb) {
$('#colorSelector div').css('backgroundColor', '#' + hex);
}

});

Строка 02 – обычный вызов палитры в DIV контейнере.
Строка 03-13 – привязка к элементу input по id c обработчиками для задания выбранного цвета с value.
Строка 14-26 – вывод в контейнере DIV c эффектами onHide и onShow

HTML:

<div id="colorpickerHolder"></div>

<input id="colorpickerField" type="text" value="00ff00" />

<div id="colorSelector"></div>

Для корректной работы в IE предлагаю подключать плагин прозрачности png файлов для jQuery (о нем чуть позже).

Посмотреть пример работы палитры цветов.

Скачать пример.

Первым делом сделал его русским, так как в оригинале он английский и немного поменял способ вывода иконки календарика для выбора даты. Оригинальную версию которого можно найти тут.

Подключается он как всегда очень просто!

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="date.js"></script>
<script type="text/javascript" src="jquery.datePicker-2.1.2.js"></script>
<link rel="stylesheet" href="datepicker.css" type="text/css" /> 

В строке 1, наш любимый jQuery, строка 2 - настройки календаря, строка 3 - сам календарик, ну и его стиль - строка 4.

А тут в архиве можно скачать русский календарь на jQuery.

Теперь рассмотрю несколько способов вызова.

1. Обычный календарь на jQuery

<script type="text/javascript">
$(function()
{
$('#inputDate1').datePicker();
});
</script>

поле ввода:

<input  id="inputDate1" value="" />

и пример: Календарь на jQuery.

2. Календарь с заданным диапазоном

Календарь с активными датами от 01-01-2000 по 01-01-2012, вызов по нажатии на иконку календарика.

<script type="text/javascript">
$(function()
{
$('#inputDate2').datePicker({
startDate: '01-01-2000',
endDate: '01-01-2012'
});
});
</script>

поле ввода:

<input  id="inputDate2" value="" />

и пример: Календарь с заданным диапазоном.

3. Вызов по нажатию на поле ввода

Обычный календарь без иконки календарика, вызов по нажатию на поле ввода.

<script type="text/javascript">
$(function()
{
$('#inputDate3').datePicker({
createButton:false,
clickInput:true
});

});
</script>

поле ввода:

<input  id="inputDate3" value="" />

и пример: Вызов по нажатию на поле ввода.

4. Календарь на год

Календарь с активной датой на год с сегодняшнего дня, вызов по нажатию на поле ввода.

<script type="text/javascript">
$(function()
{
$('#inputDate4').datePicker({
createButton:false,
clickInput:true,
endDate: (new Date()).addDays(365).asString()
});
});
</script>

поле ввода:

<input  id="inputDate4" value="" />

и пример: Календарь на год.

5. Календарь с активными рабочими днями

Календарь с активными рабочими днями (кроме субботы и воскресенья) с датой на год от сегодняшнего дня, вызов по нажатию на поле ввода и по нажатии на иконку календарика.

<script type="text/javascript">
$(function()
{
$('#inputDate5').datePicker({
clickInput:true,
endDate: (new Date()).addDays(365).asString(),
renderCallback:function($td, thisDate, month, year)
{
if (thisDate.isWeekend()) {
$td.addClass('weekend');
$td.addClass('disabled');
}
}
});
});
</script>

поле ввода:

<input  id="inputDate5" value="" />

и пример: Календарь с активными рабочими днями.

6. Календарь с кнопкой «Закрыть»

Календарь с кнопкой «Закрыть», вызов по нажатии на иконку календарика. После выбора даты - не закрывается. По нажатию на поле ввода происходит обработка функции «click»

<script type="text/javascript">
$(function()
{
$('#inputDate6').datePicker({
displayClose:true,
closeOnSelect:false
})
.bind(
'click',
function()
{
alert("сработал click!");
}
);
});
</script>

поле ввода:

<input  id="inputDate6" value="" />

и пример: Календарь с кнопкой «Закрыть».

7. Начало за 5 дней от сегодня

Календарь, активные дни которого начинаются за 5 дней от сегодняшней даты, вызов по нажатию на поле ввода. После выбора даты происходит обработка функции «dateSelected», которая вызывает сообщение с выбранной датой и присваивает ее предыдущему полю. После закрытия календаря происходит обработка функции «dpClosed»

<script type="text/javascript">
$(function()
{
$('#inputDate7')
.datePicker({
createButton:false,
startDate: (new Date()).addDays(-5).asString(),
clickInput:true
}
)
.bind(
'dpClosed',
function(e, selectedDate)
{
alert("сработал dpClosed");
}
)
.bind(
'dateSelected',
function(e, selectedDate, $td)
{
alert("сработал dateSelected, " + selectedDate.asString());
$('#inputDate7').val(selectedDate.asString());
$('#inputDate6').dpSetSelected(selectedDate.addDays(0).asString());
}
);
});
</script>

поле ввода:

<input  id="inputDate7" value="" />

и пример: Начало за 5 дней от сегодня.

8. Календарь в DIV контейнере

Календарь в DIV контейнере, при изменении даты обработка функции «dateSelected».

<script type="text/javascript">
$(function()
{
$('#inputDate8')
.datePicker({inline:true})
.bind('dateSelected',function(e, selectedDate, $td)
{
alert(selectedDate.asString());
}
);
});
</script>

DIV контейнер:

<div id="inputDate8"></div>

и пример: Календарь в DIV контейнере.