web-dev-qa-db-fra.com

sélecteur de date jQuery Mobile

Y at-il quelqu'un qui a un bon sélecteur de date pour jQuery mobile?

Je vais laisser l'utilisateur choisir une date "à partir de" et une date "à" et je n'ai rien trouvé de bon pour cette situation.

Des idées?

jqueryjquery-mobile
31
RickardP

Je suggère Datebox

https://github.com/jtsage/jquery-mobile-datebox

ou Mobiscroll

http://mobiscroll.com/

Si vous voulez quelque chose dans une saveur Android, essayez mon propre Mobi Pick

http://mobipick.sustainablepace.net/

29
sustainablepace

Essayez Mobiscroll , un sélecteur de date personnalisable optimisé pour les appareils tactiles

19
istvan.halmen

Voici le sélecteur de date spécialement pour mobile 

http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/

6
Tushar Ahirrao

J'ai travaillé sur la mise à jour de jquery ui datepicker vers les dernières versions de jquery, jqueryui et jquery mobile, donc 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 afin que vous puissiez voir comment cela a évolué.

les menus déroulants changeMois et changeYear nécessitaient des précautions particulières pour travailler (les sous-tâches étaient fréquentes)

voici comment j'ai mis à jour le testeur de date expérimental jqueryui pour jqmobile:

extrait de code js bin

Vous pouvez créer un lien vers le script datepicker au lieu du package entier jqueryui.

Le prop en lecture seule empêche le clavier d'apparaître sur ios

C’est juste un tweak du datepicker pour le faire fonctionner sur jqm, l’objectif serait de pouvoir remplacer la fonction _generatehtml du widget datepicker et d’être en mesure de donner en entrée le thème mobile à utiliser. Donc, vous n'aurez pas besoin de tout ce tas de addClass et éviterez les manipulations inutiles du DOM

Je n'ai testé que pour ios 6 (iphone, ipad) et desktop (chrome, firefox, safari), faites le nous savoir sur d'autres tests.

J'espère que ça aide autant que de 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

Il prend en compte les modifications de jquery mobile 1.4.0 et nécessite un peu moins de manipulation de dom

5
Aureltime

voici une copie de ma réponse à un autre message ici, sur la manière dont jqueryui datepicker est intégré à jquerymobile framwework..hope ça aide, comme si cela m’aurait aidé s’il existait déjà :)

après de nombreuses recherches sur Internet, en particulier en comparant datebox et jqueryui datepicker (mobiscroll et mobipick ne me sont d'aucune utilité, car je suis à la recherche d'une vue du calendrier, je suis arrivée au point où j'ai décidé d'utiliser ui datepicker pour plusieurs raisons:

  • je l'utilise depuis longtemps, je le connais assez bien
  • j'avais besoin de beforeShowDay (événement s'il est certainement possible d'avoir une fonction similaire en utilisant datebox et des événements/rappels) pour personnaliser les jours avec des classes
  • j'avais besoin d'un entête avec des possibilités de changer de mois et d'année (également possible dans datebox)
  • avec cette expérience j'avais déjà un datepicker avec une sensation & look jquerymobile

Je l'ai utilisé avec:

  • jquery 1.8.3
  • jquery mobile 1.2.0
  • jqueryui datepicker 1.8.21 ( l'obtenir d'ici )

l'utilisation de Datepicker avec des versions plus récentes rompt la mise en page lors du changement de mois/année.

de ici , j'ai obtenu les fichiers dont j'avais besoin. J'ai utilisé plusieurs réponses trouvées sur différentes questions de stackoverflow pour apporter les modifications suivantes:

  • pas de changement sur jquery.ui.datepicker.mobile.css

  • nouveau code jquery.ui.datepicker.mobile.js:

    (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 click event et i preventDefault on click sur le menu de sélection mois/année.

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
                }));
        });

beforeShowDay étant une fonction renvoyant un tableau (voir le manuel de jqueryui datepicker).

Cela fonctionne pour moi de cette façon et maintenant je dois juste ajouter des événements pour afficher uniquement le calendrier lorsque la date d'entrée a le focus.

Un lien vers l'exemple jsbin

3
Aureltime

Essayez le plugin Mobiscroll. C'est un plugin génial. Mon expérience avec ça a vraiment été bonne. J'en ai un exemple en direct en ce qui concerne l'établissement de "date de début" et de "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 son aide initiale

1
Eggineer

Voici le code complet du document 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>`

Remarques: DateFormat a 5 options:

1.mm/jj/aa 

2.aa-mm-jj

3.d M, y

4.d MM, y

5.JJ, d MM, aa

6. jour de 'MM' dans l'année 'yy

0
li bing zhao

À ce stade, vous savez peut-être que jquery mobile 1.4.5 en a un (avec un plugin): http://demos.jquerymobile.com/1.4.5/datepicker/

0
Alain Gauthier