C'è qualcuno là fuori che ha un buon selezionatore di date per jQuery mobile?jQuery Selettore di date mobile
Ho intenzione di consentire all'utente di selezionare una data "da" e una data "a" e non ho trovato nulla di buono per questa situazione.
Qualche idea?
Ecco la DatePicker appositamente per il mobile
http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/
Suggerisco Datebox
https://github.com/jtsage/jquery-mobile-datebox
o Mobiscroll
Se si desidera qualcosa in un sapore Android, provare la mia molto personale Mobi pick
Prova Mobiscroll, un datepicker personalizzabile ottimizzata per i dispositivi touch
mobiscroll con integrazione di temi jQM: http://blog.mobiscroll.com/jquery-mobile-theme -integrazione/ –
grazie per aver suggerito il mobiscroll – muneebShabbir
Bello, grazie! – Erik
Ecco una copia della mia risposta ad un altro post qui , correlato al modo in cui integrare jqueryui datepicker in jquerymobile framwework..opei aiuta, come mi avrebbe aiutato se esistesse :)
dopo un sacco di ricerche su Internet, specialmente confrontando datebox e jqueryui datepicker (mobiscroll e mobipick non sono buono per me come I'am alla ricerca di una vista del diario, ho ottenuto al punto in cui ho deciso di utilizzare datepicker ui per alcuni motivi:
ho usato con:
usando datepicker con più recente le versioni rompono il layout sulla modifica di mese/anno.
da here, ho i file necessari. Ho utilizzato diverse risposte che ho trovato su diverse domande StackOverflow, per apportare le seguenti modifiche:
jquery.ui.datepicker.mobile.js nuovo codice:
(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);
io uso su() al posto di evento click e ho preventDefault al clic sul menu di selezione mese/anno.
e lo uso in questo modo:
$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
}));
});
con beforeShowDay essendo una funzione che restituisce un array (vedi manuale datepicker jQueryUI).
Funziona per me in questo modo e ora ho solo bisogno di aggiungere eventi per mostrare solo il calendario quando l'input della data ha messo a fuoco.
ho lavorato sull'aggiornamento del DatePicker jQuery UI alle ultime versioni di jQuery, jQueryUI e mobile jQuery così per jq1.9.1 jqui 1.10.2 e jQm 1.3.0. Ho preferito lasciare la mia precedente risposta in modo da poter vedere come si è evoluta.
la discesa changeMonth e changeYear necessaria particolare attenzione al lavoro (unstylying era frequente)
qui è come ho aggiornato il DatePicker jQueryUI sperimentale per jqmobile:
è possibile collegare al script datepicker al posto dell'intero pacchetto jqueryui.
Il puntello in sola lettura impedisce la tastiera a comparire su ios
E 'solo un tweak del DatePicker per farlo funzionare sul jQm, l'obiettivo sarebbe quello di essere in grado di ignorare la funzione _generatehtml di datepicker widget e di essere in grado di dare come input te tema jquery mobile da utilizzare. Quindi non avrai bisogno di tutto questo addClass ed eviterai inutili manipolazioni DOM
Ho provato solo per iOS 6 (iphone, ipad) e desktop (chrome, firefox, safari), facci sapere di altri test.
speriamo vi sia utile come poltiglia come necessario it :)
qui è tutto il codice separati in html, js e 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; }
Ecco la versione aggiornata di lavorare con jQm 1.4: jsbin jqm 1.4.0
E 'tenendo conto dei cambiamenti di jQuery Mobile 1.4.0 e ha bisogno di un po 'meno di manipolazione del DOM
A questo punto si può sapere, jQuery 1.4.5 mobile ha uno (con un plug-in): http://demos.jquerymobile.com/1.4.5/datepicker/
non riesco a farlo funzionare, appare sullo schermo, possibile per scegliere il valore ma non per impostare inizialmente una data! Controllo maldestro IMO –
Prova Mobiscroll Plugin. È un fantastico plug-in. La mia esperienza con esso è stata davvero buona. Ne ho un esempio dal vivo per quanto riguarda l'impostazione di una "data di inizio" e "data di fine". È possibile controllare questo esempio su 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;
}
Grazie a Gajotres per la fornitura di aiuto iniziale
Ecco il codice completo da un documento 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>`
Annunci: DateFormat ha 5 opzioni:
1.mm/dd/yy
2.yy-mm-gg
3.d M, y
4.d MM, y
5.DD, d MM, aa
6. ' giorno ' d ' di ' MM ' nell'anno ' aa
questo sembrare s per essere rotto ora, le pagine demo. nessuna delle demo funziona più – Rubytastic
@Rubytastic si ho dovuto passare a un altro provider ... scusa per l'inconveniente :-(Torna online ora :-) – sustainablepace
@sustainableplace: ottimo hai risolto il problema, github free project hosting di qualità :) sembra molto buono, per ora risolto in una vista elenco predefinito – Rubytastic