Có ai đó ở đó có bộ chọn ngày tốt cho điện thoại di động jQuery không?Bộ chọn ngày của jQuery Mobile
Tôi sẽ cho phép người dùng chọn ngày "từ" và ngày "đến" và tôi không tìm thấy bất kỳ điều gì tốt cho tình huống này.
Bất kỳ ý tưởng nào?
Đây là datepicker đặc biệt dành cho điện thoại di động
http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/
Tôi đề nghị Datebox
https://github.com/jtsage/jquery-mobile-datebox
hoặc Mobiscroll
Nếu bạn muốn một cái gì đó trong một hương vị Android, hãy thử Mobi rất riêng của tôi Pick
Hãy thử Mobiscroll, một datepicker tùy biến tối ưu hóa cho các thiết bị cảm ứng
mobiscroll với jQM Tích hợp chủ đề: http://blog.mobiscroll.com/jquery-mobile-theme -Kinh nhập/ –
cảm ơn vì đã đề xuất mobiscroll – muneebShabbir
Rất vui, cảm ơn! – Erik
đây là một bản sao của câu trả lời của tôi để bài khác ở đây , liên quan đến cách tích hợp jqueryui datepicker trong jquerymobile framwework..hope nó giúp, như nó sẽ giúp tôi nếu nó đã tồn tại :)
sau nhiều tìm kiếm trên Internet, đặc biệt là so sánh datebox và jqueryui datepicker (mobiscroll và mobipick không tốt với tôi như i'am tìm kiếm một cái nhìn lịch, tôi đã đến điểm mà tôi quyết định sử dụng datepicker ui cho vài lý do:
tôi đã sử dụng nó với:
sử dụng datepicker với gần đây phiên bản phá vỡ bố cục khi thay đổi tháng/năm.
từ here, tôi có các tệp cần thiết. Tôi đã sử dụng một số câu trả lời mà tôi tìm thấy trên các câu hỏi xếp chồng khác nhau, để thực hiện các thay đổi sau:
jquery.ui.datepicker.mobile.js mã mới:
(function ($, undefined) {
//cache previous datepicker ui method
var prevDp = $.fn.datepicker;
//rewrite datepicker
$.fn.datepicker = function (options) {
var dp = this;
//call cached datepicker plugin
var retValue = prevDp.apply(this, arguments);
//extend with some dom manipulation to update the markup for jQM
//call immediately
function updateDatepicker() {
$(".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
$(".ui-datepicker-calendar .ui-btn", dp).each(function() {
var el = $(this);
// remove extra button markup - necessary for date value to be interpreted correctly
// only do this if needed, sometimes clicks are received that don't require update
// e.g. clicking in the datepicker region but not on a button.
// e.g. clicking on a disabled date (from next month)
var uiBtnText = el.find(".ui-btn-text");
if (uiBtnText.length)
el.html(uiBtnText.text());
});
};
//update after each operation
updateDatepicker();
$(dp).on("click change", function(event, ui)
{
$target=$(event.target);
if(event.type=="click" && ($target.hasClass("ui-datepicker-month") || $target.hasClass("ui-datepicker-year")))
event.preventDefault();
else
updateDatepicker(event);
});
//return jqm obj
if (retValue) {
if (!retValue.jquery) return retValue;
}
return this;
};
})(jQuery);
tôi sử dụng trên() thay vì sự kiện click và tôi preventDefault trên nhấp chuột vào tháng/chọn menu năm.
Và tôi sử dụng nó theo cách này:
$form
.trigger("create")
.find("input[type='date'], input:jqmData(type='date')")
.each(function()
{
$(this)
.after($("<div />").datepicker(
{
altField : "#" + $(this).attr("id"),
altFormat : "dd/mm/yy",
showOtherMonths : true,
selectOtherMonths : true,
showWeek : true,
changeYear : true,
changeMonth : true,
beforeShowDay : beforeShowDay
}));
});
với beforeShowDay là một hàm trả về một mảng (xem datepicker thủ jQueryUI).
Nó hoạt động cho tôi theo cách này và bây giờ tôi chỉ cần thêm sự kiện để chỉ hiển thị lịch khi nhập ngày đã được tập trung.
tôi làm việc về việc cập nhật datepicker jquery ui với các phiên bản mới nhất của jquery, jQueryUI và jquery di động để cho jq1.9.1 jqui 1.10.2 và jqm 1.3.0. Tôi thích để lại như là câu trả lời trước đây của tôi để bạn có thể thấy nó phát triển như thế nào.
các changeMonth và changeYear thả xuống cần được chăm sóc đặc biệt để làm việc (unstylying là thường xuyên)
đây đó là làm thế nào tôi cập nhật datepicker jQueryUI nghiệm cho jqmobile:
Bạn có thể liên kết với tập lệnh datepicker thay vì toàn bộ gói jqueryui.
Các prop readonly ngăn bàn phím để xuất hiện trên ios
Nó chỉ là một tinh chỉnh của datepicker để làm cho nó làm việc trên jqm, mục tiêu sẽ được để có thể ghi đè lên các chức năng _generatehtml của datepicker widget và là có thể cung cấp như là đầu vào chủ đề di động te jquery để sử dụng. Vì vậy, bạn sẽ không cần toàn bộ chuỗi addClass đó và tránh thao tác DOM không cần thiết
Tôi chỉ thử nghiệm ios 6 (iphone, ipad) và máy tính để bàn (chrome, firefox, safari), cho chúng tôi biết về các thử nghiệm khác.
Hy vọng nó giúp như chuyện lãng mạn như cần nó :)
ở đây là tất cả các mã tách ra trong html, js và 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; }
Dưới đây là phiên bản cập nhật để làm việc với jqm 1.4: jsbin jqm 1.4.0
Người ta có tính đến những thay đổi của jquery mobile 1.4.0 và cần một chút ít dom thao tác
Bởi thời gian này bạn có thể biết, jquery 1.4.5 thoại di động có một (với một plugin): http://demos.jquerymobile.com/1.4.5/datepicker/
tôi không thể thực hiện được, nó xuất hiện trên màn hình, có thể để chọn giá trị nhưng không phải ban đầu thiết lập một số ngày! Kiểm soát vụng về IMO –
Hãy thử Mobiscroll Plugin. Một plugin tuyệt vời của nó. Kinh nghiệm của tôi với nó đã thực sự tốt. Tôi có ví dụ trực tiếp về việc đặt ngày bắt đầu "ngày bắt đầu" và "ngày kết thúc". Bạn có thể kiểm tra ví dụ này trên jsFiddle
Here is source code for start and end date example
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="http://example.gajotres.net/iscrollview/mobiscroll-2.4.custom.min.css" />
<link rel="stylesheet" href="http://www.fajrunt.org/mobiscroll.custom-2.5.1.min.css"/>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="http://example.gajotres.net/iscrollview/mobiscroll-2.4.custom.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="content">
<input name="demo" id="demo" class="i-txt" />
</div>
<div data-role="content">
<input name="demo2" id="demo2" class="i-txt" />
</div>
</div>
</body>
</html>
Javascript & Jquery:
$(document).on('pagebeforeshow', '#index', function(){
$('#demo').mobiscroll().date({
//invalid: { daysOfWeek: [0, 6]},
theme: 'android-ics',
display: 'inline',
mode: 'scroller',
dateOrder: 'mm dd yy',
dateFormat : "mm-dd-yy",
minDate: new Date(2015,03,16),
maxDate: new Date(2015,11,03),
});
$('#demo2').mobiscroll().date({
// invalid: { daysOfWeek: [0, 6]},
theme: 'android-ics',
display: 'inline',
mode: 'scroller',
dateOrder: 'mm dd yy',
dateFormat : "mm-dd-yy",
minDate: new Date(2015,3,21),
maxDate: new Date(2015,11,3)
});
$("#demo").change(function(){
getNextdate();
});
$("#demo2").change(function(){
getPdate();
});
});
function getNextdate() {
var tt = document.getElementById('demo').value;
var date = new Date(tt);
var newdate = new Date(date);
newdate.setDate(newdate.getDate()+5);
var dd = newdate.getDate();
if(dd<10) {dd='0'+dd}
var mm = newdate.getMonth()+1;
if(mm<10) {mm='0'+mm}
var y = newdate.getFullYear();
var someFormattedDate = mm + '-' + dd + '-' + y;
document.getElementById('demo2').value = someFormattedDate;
}
function getPdate() {
var tt = document.getElementById('demo2').value;
var date = new Date(tt);
var newdate = new Date(date);
newdate.setDate(newdate.getDate()-5);
var dd = newdate.getDate();
if(dd<10) {dd='0'+dd}
var mm = newdate.getMonth()+1;
if(mm<10) {mm='0'+mm}
var y = newdate.getFullYear();
var someFormattedDate = mm + '-' + dd + '-' + y;
document.getElementById('demo').value = someFormattedDate;
}
Nhờ Gajotres cho việc cung cấp sự giúp đỡ ban đầu
Đây là mã đầy đủ từ tài liệu Juery:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Format date</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$("#datepicker").datepicker();
$("#format").change(function() {
$("#datepicker").datepicker("option", "dateFormat", 'yy-mm-dd'); // I am using the internationl date format, you can choose yours following below six options.
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" size="30"></p>
<p>Format options:<br>
</body>
</html>`
Thông báo: DateFormat có 5 tùy chọn:
1.mm/dd/yy
2.yy-mm-dd
3.d M, y
4.d MM, y
5.DD, d MM, yy
6. ' ngày ' d ' của ' MM ' trong năm ' yy
này dường như s để được chia ngay bây giờ, các trang demo. không có bản demo làm việc nữa – Rubytastic
@Rubytastic yeah Tôi phải chuyển sang một nhà cung cấp khác ... xin lỗi vì sự bất tiện này :-(Trở lại trực tuyến ngay :-) – sustainablepace
@sustainableplace: tuyệt vời bạn đã giải quyết vấn đề, github miễn phí dự án lưu trữ chất lượng :) trông rất tốt, hiện đã được giải quyết thành chế độ xem danh sách mặc định – Rubytastic