datepicker 插件在按钮单击时显示？

Question

我正在使用来自 jQuery UI 的日期选择器并根据我的需要自定义其 CSS。我想让datepicker在按钮点击时打开，它本身显示日期信息like this.

我当前的html代码：

<div class="date-pickup-block">
                        <div type="text">
                        <input type="text" id="datepicker"/>
                        </div>                        
                    </div>

我的 javascript 代码是：

$(function(){
    $('#datepicker').datepicker({
        showOn: 'button',
        buttonText: 'Show Date',

        dateFormat: "D dd/mm/yy",           
        inline: true,
        showOtherMonths: false,
        dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
    });

    $(".ui-datepicker-trigger").mouseover(function(){
        $(this).css('cursor','pointer');
    });
});

当我点击show Date 时，我当前的日期选择器看起来像this.

CSS 代码：

.ui-datepicker {
    background-color: #fff;
    width: 255px;
    height: auto;
    margin: 5px auto 0;
    padding: 15px;

    }

    .ui-datepicker a{
        text-decoration: none;
        }

    .ui-datepicker table{
        width: 100%;        
        }

    .ui-datepicker thead{
        color: #f36846;
        }

    .ui-datepicker-header{
        color: #f36846;
        font-family: 'proxima_nova_ltsemibold';
        font-size: 15px;
        letter-spacing: 1px;
        text-transform: uppercase;
        }

    .ui-datepicker tbody:before {
        content: "-";
        display: block;
        line-height: 1em;
        color: transparent;
        }

    .ui-datepicker-title{
        text-align: center;
        }

    .ui-datepicker-prev, .ui-datepicker-next {
        display: inline-block;
        width: 30px;
        height: 30px;
        text-align: center;
        cursor: pointer;        
        background-repeat: no-repeat;
        line-height: 600%;
        overflow: hidden;
        }

    .ui-datepicker-prev {
        background-image: url('../imgs/pickup-details/calander_left.png');      
        float: left;
        background-position: center 2px;
        }

    .ui-datepicker-next {
        background-image: url('../imgs/pickup-details/calander_right.png');
        float: right;
        background-position: center 2px;
        }

    .ui-datepicker tbody td {

        font: 10px 'proxima_nova_ltsemibold';

        background-color: #fff;
        border: 1px solid #dbdbdb;
        }

    .ui-datepicker td span, .ui-datepicker td a {
        color: #000;
        display: inline-block;
        height: 31px;
        line-height: 31px;
        text-align: center;
        width: 31px;
        }


    .ui-datepicker-calendar .ui-state-active {
        background: #f36846;
        color: #fff;   
        }

我不知道 mucj jQuery，所以从 jQuery 进行自定义是很困难的。我需要在 HTML 和 jQuery 中进行哪些更改才能使其看起来 like this.

Answer 1

<script type="text/javascript">
$(function () {
    $("#datepicker").datepicker({
        constrainInput: true,
        showOn: 'button',
        buttonText: 'Select'
    }); });</script><input id="datepicker" disabled="disabled" />

用这个就可以了