копия ответа в другом месте:
Я работал над обновлением JQuery щ DatePicker к последней версии JQuery, jqueryui и Jquery мобильного поэтому для jq1.9.1 jqui 1.10.2 и jqm 1,3 +0,0. Я предпочел уйти, как и мой предыдущий ответ, чтобы вы могли видеть, как он развился.
changeMonth и changeYear выпадающий требуется особое внимание работе (unstylying был частым)
здесь, как я обновил экспериментальную jqueryui DatePicker для jqmobile:
js bin code snippet
Вы можете ссылка на datepicker вместо всего пакета jqueryui.
Предназначенный только дл чтени опоры предотвращает клавиатуру появляться на КСН
Это просто твик из DatePicker, чтобы заставить его работать на jqm, цель будет иметь возможность переопределить функцию _generatehtml из Datepicker виджета и быть в состоянии дать в качестве входной темы темы jquery для использования. Таким образом, вам не понадобится такая целая куча addClass и избежать ненужных манипуляций с DOM.
Я тестировал только ios 6 (iphone, ipad) и рабочий стол (хром, firefox, safari), сообщите нам о других тестах.
Надеется, что это помогает в кашице, как это было нужно :)
здесь весь код отделенным в HTML, JS и CSS:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jqueryui 1.10.2 datepicker Integration in jquery mobile 1.3.0 and jquery 1.9.1 by aureltime</title>
<link rel="stylesheet" href="//ajax.aspnetcdn.com/ajax/jquery.mobile/1.3.0/jquery.mobile-1.3.0.min.css">
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>jQuery UI's Datepicker Styled for mobile adapted by Aureltime</h1>
</div>
<div data-role="content">
<form action="#" method="get" id="form">
<div data-role="fieldcontain">
<label for="date">Date:</label>
<input type="date" name="date" id="date" value="" />
</div>
</form>
</div>
</div>
</body>
</html>
JS
//reset type=date inputs to text
$.mobile.page.prototype.options.degradeInputs.date = true;
$("#form").trigger("create");
$(document)
.on("pageinit", function(){
$("#date")
.prop("readonly", "true")
.on("click", function(){
$input=$(this);
$next=$input.next();
if($next.hasClass("hasDatepicker"))
$next.hide();
$input
.hide()
.after($("<div />", { id : "datepicker_"+$input.attr("id")}).datepicker(
{
altField : "#" + $input.attr("id"),
altFormat : "dd/mm/yy",
defaultDate : $input.val(),
showOtherMonths : true,
selectOtherMonths : true,
//showWeek : true,
changeYear : true,
changeMonth : true,
//showButtonPanel : true,
//beforeShowDay : beforeShowDay,
onSelect : function(dateText, inst)
{ $("#datepicker_"+$input.attr("id")).hide();
$input.show();
}
}));
});
});
(function($, undefined) {
//cache previous datepicker ui method
var prevDp = $.fn.datepicker;
//rewrite datepicker
$.fn.datepicker = function(options){
var dp = this;
//call cached datepicker plugin
prevDp.call(this, options);
//extend with some dom manipulation to update the markup for jQM
//call immediately
function updateDatepicker(event){
$(".ui-datepicker-header", dp).addClass("ui-body-c ui-corner-top").removeClass("ui-corner-all");
$(".ui-datepicker-prev, .ui-datepicker-next", dp).attr("href", "#");
$(".ui-datepicker-prev", dp).buttonMarkup({iconpos: "notext", icon: "arrow-l", shadow: true, corners: true});
$(".ui-datepicker-next", dp).buttonMarkup({iconpos: "notext", icon: "arrow-r", shadow: true, corners: true});
$(".ui-datepicker-calendar th", dp).addClass("ui-bar-c");
$(".ui-datepicker-calendar td", dp).addClass("ui-body-c");
$(".ui-datepicker-calendar a", dp).buttonMarkup({corners: false, shadow: false});
$(".ui-datepicker-calendar a.ui-state-active", dp).addClass("ui-btn-active"); // selected date
$(".ui-datepicker-calendar a.ui-state-highlight", dp).addClass("ui-btn-up-e"); // today"s date
if(typeof event != "undefined")
{
var classe= $(event.target).attr("class");
//alert(classe);
}
$(".ui-datepicker-calendar .ui-btn", dp).each(function(){
var el = $(this);
var buttonText = el.find(".ui-btn-text");
// remove extra button markup - necessary for date value to be interpreted correctly
if(buttonText.length)
el.html(el.find(".ui-btn-text").text());
});
// }
$(dp)
.off()
.on("click", updateDatepicker)
.find("select")
.on("change", function(event){updateDatepicker(event);});
}
//update now
updateDatepicker();
//return jqm obj
return this;
};
})(jQuery);
CSS
div.hasDatepicker{ display: block; padding: 0; overflow: visible; margin: 8px 0; }
.ui-datepicker { overflow: visible; margin: 0; max-width: 500px; }
.ui-datepicker .ui-datepicker-header { position:relative; padding:.4em 0; border-bottom: 0; font-weight: bold; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { padding: 1px 0 1px 2px; position:absolute; top: .5em; margin-top: 0; text-indent: -9999px; }
.ui-datepicker .ui-datepicker-prev { left:6px; }
.ui-datepicker .ui-datepicker-next { right:6px; }
.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; }
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year { width: 49%;}
.ui-datepicker table {width: 100%; border-collapse: collapse; margin:0; }
.ui-datepicker td { border-width: 1px; padding: 0; text-align: center; }
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em 0; font-weight: bold; margin: 0; border-width: 0; text-align: center; text-decoration: none; }
.ui-datepicker-calendar th { padding-top: .3em; padding-bottom: .3em; }
.ui-datepicker-calendar th span, .ui-datepicker-calendar span.ui-state-default { opacity: .3; }
.ui-datepicker-calendar td a { padding-top: .5em; padding-bottom: .5em; }
Но он не показывает номер недели в пользовательском интерфейсе. Dats самая большая проблема с плагином datebox. –
в последней версии он поддерживает номер недели тоже <3 –