▼悩み
スマホでカレンダーJS（Datepicker）を使うと、入力時に右下に「完了」とか出る（ブラウザ使用）ので、これをなくしたいとの事。
こんな感じで表示したい。
http://leanmodal.finelysliced.com.au/
まずはモーダル化したいので上記JSをDLして読み込みます。
<script type="text/javascript">
$(function() {
$( 'a[rel*=leanModal]').leanModal({
top: 50, // モーダルウィンドウの縦位置を指定
overlay : 0.5, // 背面の透明度
closeButton: ".modal_close" // 閉じるボタンのCSS classを指定
});
});
</script>
HTML内に上記記述。
input内に今日日付を出力しときたいので、下記JSを記述。
<script>
$(function() {
$('#formBd').datepicker({
showOtherMonths: true,
minDate: 0,
dateFormat:'yy年mm月dd日',
dayNamesMin:['S','M','T','W','T','F','S'],
onSelect: function(dateText, inst) {
$('#toBd').datepicker('option', 'minDate', dateText);
$('#from').val(dateText);
}
});
$('#toBd').datepicker({
showOtherMonths: true,
minDate: 0,
dateFormat:'yy年mm月dd日',
dayNamesMin:['S','M','T','W','T','F','S'],
onSelect: function(dateText, inst) {
$('#fromBd').datepicker('option', 'maxDate', dateText);
$('#to').val(dateText);
}
});
});
</script>
<script>
$(document).ready(function() {
$(".datepicker").datepicker({ dateFormat: 'yy年mm月dd日'});
$('.datepicker').datepicker().datepicker("setDate", new Date());
});
</script>
データピッカーを引用します。
開始日と返却日を設定。
<div class="cf form_day mt20 mb20">
<p><label for="from"><span class="form_position">ご利用開始日</span></label></p>
<p class="cal_icon">
<a rel="leanModal" href="#div787"></a>
<input id="from" type="text" value="" name="from" class="datepicker">
</p>
<div id="div787">
<div id="formBd"readonly="readonly" name="from"></div>
<a class="modal_close" href="javascript:void(0)"></a>
</div>
</div>
<div class="cf form_day mb20">
<p><label for="to"><span class="form_position">ご返却予定日</span></label></p>
<p class="cal_icon">
<a rel="leanModal" href="#div788"></a>
<input id="to" type="text" value="" name="to" class="datepicker">
</p>
<div id="div788">
<div id="toBd" name="to" readonly="readonly"></div>
<a class="modal_close" href="javascript:void(0)"></a>
</div>
</div>
スタイルを指定。
/* 2016 cal */
#lean_overlay{
position: fixed; z-index:100;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background: #000;
display: none;
}
#div787{
display:none;
background:none;
width:50%;
position:relative;
height:70%;
}
#div788{
display:none;
background:none;
width:50%;
position:relative;
height:70%;
}
.modal_close{
position: absolute;
left: 35%;
top:350px;
bottom: 0;
display: block;
width: 64px;
height: 64px;
background: url(../js/leanModal.v1.1/cross-black-circular-button.png) no-repeat;
z-index: 2;
background-size: 48px;
}
.ui-datepicker {
position: fixed;
top: 25%!important;
left:5px;
box-shadow: 3px 3px 0 0 rgba(0,0,0,0.1);
z-index: 2000;
}
.form_day input {
width: 95%;
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
background: url(../img/selectBtn.gif) 0 0 no-repeat;
background-size: 9px;
background-position: right 10px center;}
このAPPを利用します。
