javascript - 日期选择器始终可见

Question

在我的phonegap应用程序中，我创建了一个日期选择器字段。对于这个，我使用了 jquery-ui-datepicker 插件，并且没有在我的 javascript 文件中编写任何操作。

我的问题是日期选择器始终可见，但我想在单击日期字段时显示它，并在选择日期时隐藏它。

我的html代码:

<div data-role="fieldcontain" class="ui-hide-label">
    <label for="mDOB">DOB</label>
    <input type="date" name="date" id="date" value=""  />   
</div>

和我的日期选择器用户界面代码:

(function($, undefined ) {

//cache previous datepicker ui method
var prevDp = $.fn.datepicker;

//rewrite datepicker
$.fn.datepicker = function( options ){

    var dp = this;

    //call cached datepicker plugin
    prevDp.call( this, options );

    //extend with some dom manipulation to update the markup for jQM
    //call immediately
    function updateDatepicker(){
    $( ".ui-datepicker-header", dp ).addClass("ui-body-c ui-corner-top").removeClass("ui-corner-all");
    $( ".ui-datepicker-prev, .ui-datepicker-next", dp ).attr("href", "#");
    $( ".ui-datepicker-prev", dp ).buttonMarkup({iconpos: "notext", icon: "arrow-l", shadow: true, corners: true});
    $( ".ui-datepicker-next", dp ).buttonMarkup({iconpos: "notext", icon: "arrow-r", shadow: true, corners: true});
    $( ".ui-datepicker-calendar th", dp ).addClass("ui-bar-c");
    $( ".ui-datepicker-calendar td", dp ).addClass("ui-body-c");
    $( ".ui-datepicker-calendar a", dp ).buttonMarkup({corners: false, shadow: false}); 
    $( ".ui-datepicker-calendar a.ui-state-active", dp ).addClass("ui-btn-active"); // selected date
    $( ".ui-datepicker-calendar a.ui-state-highlight", dp ).addClass("ui-btn-up-e"); // today"s date
        $( ".ui-datepicker-calendar .ui-btn", dp ).each(function(){
    var el = $(this);
    // remove extra button markup - necessary for date value to be interpreted correctly
    el.html( el.find( ".ui-btn-text" ).text() ); 
    }); 
};

//update now
updateDatepicker();

// and on click
$( dp ).click( updateDatepicker );

//return jqm obj 
eturn this;
};

//bind to pagecreate to automatically enhance date inputs   
$( ".ui-page" ).live( "pageshow", function(){       
    $( "input[type='date'], input:jqmData(type='date')", this ).each(function(){
    $(this).after( $( "<div />" ).datepicker({ altField: "#" + $(this).attr( "id" ), showOtherMonths: true }) );
        }); 
    });
})( jQuery );

提出一些解决方案或提供一些日期选择器示例。

Answer 1

在 DIV 上初始化日期选择器使其始终可见，在输入上初始化日期选择器使其在输入焦点时弹出，现在您正在创建一个新的 DIV 元素，日期选择器将在其上初始化，并且然后将 DIV 插入 after() 输入。
尝试删除该 DIV 并直接在输入上初始化日期选择器:

$( "input[type='date'], input:jqmData(type='date')", this ).each(function(){
    $(this).datepicker({ altField: "#" + $(this).attr( "id" ), showOtherMonths: true });
});