【js】Datepicker カレンダーから日付入力！しかもモーダルウィンドウでお願いします。

▼悩み

スマホでカレンダー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;}