jQuery Mobile sélecteur de date
y a - t-il quelqu'un dehors qui a un bon cueilleur de dattes pour jQuery mobile?
je vais laisser l'utilisateur choisir une date" de "et une date" à " et je n'ai rien trouvé de bon pour cette situation.
des idées?
8 réponses
je suggère Datebox
https://github.com/jtsage/jquery-mobile-datebox
ou Mobiscroll
si vous voulez quelque chose dans une saveur D'Androïde, Essayez mon propre Mobi Pick
Mobiscroll, un lecteur de données personnalisable optimisé pour les appareils tactiles
voici le lecteur de données spécialement pour mobile
http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/
j'ai travaillé sur la mise à jour du datepicker jQuery ui vers les dernières versions de jQuery , jqueryui et jQuery mobile so Pour jq1.9.1 jqui 1.10.2 et JQM 1.3.0. J'ai préféré partir comme ma réponse précédente pour que vous puissiez voir comment elle a évolué.
le changeMonth et changeYear déroulant besoin de soins spéciaux pour le travail (unstylying était fréquent)
voici comment j'ai mis à jour le datepicker expérimental jqueryui pour jqmobile :
vous pouvez créer un lien vers le script du curseur de données au lieu de l'ensemble du paquet jqueryui.
Le readonly prop empêche le clavier pour apparaître sur ios
C'est juste un réglage de la datepicker pour le faire fonctionner sur jqm, l'objectif serait d'être en mesure de remplacer la _generatehtml fonction de composant et d'être en mesure de donner d'entrée de te thème jquery mobile à utiliser. Donc vous n'aurez pas besoin de tout ce tas de addClass et éviter les DOM inutiles la manipulation
j'ai seulement testé pour iOS 6 (iphone, ipad) et desktop (chrome, firefox, safari), laissez-nous savoir sur d'autres tests.
j'Espère que ça aide autant besoin :)
voici tout le code séparé en html, js et 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; }
Voici la version mise à jour pour travailler avec jqm 1.4 : jsbin jqm 1.4.0
C'est en tenant compte des changements de jquery mobile 1.4.0 et a besoin d'un peu moins de manipulation du dom
voici une copie de ma réponse à un autre post ici, lié à la façon d'intégrer jQueryUI datepicker dans jQueryMobile Framwork..espérons que cela aide, comme elle l'aurait aidé moi s'il était déjà là :)
après beaucoup de recherche sur Internet, en particulier en comparant datebox et jQueryUI datepicker (mobiscroll et mobipick ne sont pas bons pour moi comme je suis à la recherche d'une vue de calendrier, je suis arrivé au point où j'ai décidé d'utiliser ui datepicker pour quelques raisons :
- je l'utilise à partir de longue date, je sais assez bien
- j'avais besoin du beforeShowDay (event s'il est certainement possible d'avoir une fonction similaire en utilisant datebox et events/callbacks) pour personnaliser les jours avec les classes
- j'avais besoin d'un en-tête avec des possibilités de changer le mois et l'année (également possible dans datebox)
- avec cette expérience j'ai déjà eu un datepicker avec jquerymobile sentir & regarder
je l'ai utilisé avec :
- jquery 1.8.3
- jquery mobile 1.2.0
- jQueryUI datepicker 1.8.21 (l'obtenir à partir d'ici)
utiliser datepicker avec des versions plus récentes casse la mise en page mois/année de changement.
ici, j'ai les fichiers dont j'avais besoin. J'ai utilisé plusieurs réponses que j'ai trouvées sur différentes questions stackoverflow, pour faire les changements suivants:
- pas de changement jquery.interface.datepicker.mobile.css
jquery.interface.datepicker.mobile.js nouveau code :
(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);
j'utilise on () au lieu de cliquer sur event et je prévisitdefault sur Cliquez sur le menu select mois/year.
Et je l'utilise de cette façon :
$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
}));
});
avec beforeShowDay étant une fonction retournant un tableau (voir manuel jQueryUI datepicker).
cela fonctionne pour moi de cette façon et je maintenant j'ai juste besoin d'ajouter des événements pour ne montrer le calendrier que lorsque la date d'entrée reçu le focus.
Essayez Mobiscroll Plugin. Ses un plugin génial. Mon expérience avec ça a été vraiment bonne. J'ai un exemple vivant de ce qui concerne l'établissement d'un "date de début" et "date de fin". Vous pouvez vérifier cet exemple sur 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;
}
merci à Gajotres pour l'aide initiale
a ce moment vous pouvez savoir, jquery mobile 1.4.5 a un (avec un plugin): http://demos.jquerymobile.com/1.4.5/datepicker/
voici le code complet du document de 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>`
Note: DateFormat ont 5 options:
1.mm / JJ / yy
2.aa-mm-jj
3.d M, y
4.D MM, y
5.DD, D MM, yy
6."jour" d " de " MM "dans l'année" aa