发表新帖
发表新帖

jQuery Mobile date picker

后端 未结
关注
8 1805
既然无缘
既然无缘 2021-02-01 15:52

Is there someone out there that has a good date picker for jQuery mobile?

I\'m going to let the user select a \"from\" date and a \"to\" date and I haven\'t found anythi

相关标签:
8条回答
  • Happy的楠姐
    2021-02-01 16:38

    Try Mobiscroll Plugin. Its an awesome plugin. My experience with it has really been good. I have a live example of it with respect to setting a "start date" and "end date". You can check this example on 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;
}

    Thanks to Gajotres for providing initial help

    0 讨论(0)
  • 既然无缘
    2021-02-01 16:41

    Here is the datepicker specially for mobile

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

    0 讨论(0)
 看不清?
提交回复
热议问题