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?

31
demandé sur danielrvt-sgb 0000-00-00 00:00:00

8 réponses

je suggère Datebox

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

ou Mobiscroll

http://mobiscroll.com/

si vous voulez quelque chose dans une saveur D'Androïde, Essayez mon propre Mobi Pick

http://mobipick.sustainablepace.net/

29
répondu sustainablepace 2013-12-04 20:35:20

Mobiscroll, un lecteur de données personnalisable optimisé pour les appareils tactiles

19
répondu istvan.halmen 2011-09-08 06:57:08

voici le lecteur de données spécialement pour mobile

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

6
répondu Tushar Ahirrao 2011-09-06 13:23:58

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 :

js bin code extrait de

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

5
répondu Aureltime 2013-09-03 15:35:27

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 :

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.

un lien vers l'exemple jsbin

3
répondu Aureltime 2013-01-07 09:28:50

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

1
répondu Eggineer 2015-03-06 10:11:09

a ce moment vous pouvez savoir, jquery mobile 1.4.5 a un (avec un plugin): http://demos.jquerymobile.com/1.4.5/datepicker/

0
répondu Alain Gauthier 2014-12-10 03:11:19

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

0
répondu li bing zhao 2016-02-03 03:39:29