Javascript datepicker插件在按钮点击时显示？

我正在使用jQueryUI中的日期选择器，并根据需要定制其CSS。我想打开按钮点击，它本身显示日期信息

我当前的html代码：

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

我当前的日期选择器，当我点击

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;   
        }

我不知道mucjquery，所以从jQuery定制很困难。我需要在HTML和jQuery中做哪些更改才能使它看起来像

$（函数（）{
$（“#日期选择器”）。日期选择器({
输入：对，
showOn:'按钮'，
buttonText:“选择”
}); });

---

使用此选项将起作用

他们看起来完全不同，而且很可能不是一个容易的改变。您应该发布原始的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;   
        }

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