Date picker for JQM app dob & doj not future dates:
=======================================
mobiscroll date picker;
add the css and js as per below order and corresponding path:::
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<link type="text/css" href="date/jqm-datebox.min.css" rel="stylesheet" />
<script src="js/jquery-2.1.3.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="logintheme1.css">
<!--<script src="jquery-mobile.js"></script>-->
<script type="text/javascript" src="date/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="date/jqm-datebox.mode.datebox.min.js"></script>
<script type="text/javascript" src="date/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
<link href="date/mobiscroll-2.1-beta.custom.min.css" rel="stylesheet" type="text/css" />
<script src="date/mobiscroll-2.1-beta.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function()
{
$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';
});
$(function () {
var curr = new Date().getFullYear();
var opt = {
}
opt.date = {
preset: 'date'
};
opt.datetime = {
preset: 'datetime',
minDate: new Date(2012, 3, 10, 9, 22),
maxDate: new Date(2014, 7, 30, 15, 44),
stepMinute: 5
};
opt.time = {
preset: 'time'
};
$('#test_default').bind('click', function () {
$('#test_default').val('').scroller('destroy').scroller($.extend(opt['date'], {
theme: 'default'
}));
});
$('#test_default').trigger('click');
});
</script>
</head>
<body>
<div class="ui-field-contain">
<label for="dob"> DOB </label>
<input type="text" name="test_default" id="test_default" class="required" />
</div>
=======================================
mobiscroll date picker;
add the css and js as per below order and corresponding path:::
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<link type="text/css" href="date/jqm-datebox.min.css" rel="stylesheet" />
<script src="js/jquery-2.1.3.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="logintheme1.css">
<!--<script src="jquery-mobile.js"></script>-->
<script type="text/javascript" src="date/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="date/jqm-datebox.mode.datebox.min.js"></script>
<script type="text/javascript" src="date/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
<link href="date/mobiscroll-2.1-beta.custom.min.css" rel="stylesheet" type="text/css" />
<script src="date/mobiscroll-2.1-beta.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function()
{
$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';
});
$(function () {
var curr = new Date().getFullYear();
var opt = {
}
opt.date = {
preset: 'date'
};
opt.datetime = {
preset: 'datetime',
minDate: new Date(2012, 3, 10, 9, 22),
maxDate: new Date(2014, 7, 30, 15, 44),
stepMinute: 5
};
opt.time = {
preset: 'time'
};
$('#test_default').bind('click', function () {
$('#test_default').val('').scroller('destroy').scroller($.extend(opt['date'], {
theme: 'default'
}));
});
$('#test_default').trigger('click');
});
</script>
</head>
<body>
<div class="ui-field-contain">
<label for="dob"> DOB </label>
<input type="text" name="test_default" id="test_default" class="required" />
</div>
No comments:
Post a Comment