0

ユーザーが月のみを選択できるJquery datepicker要素を使用しています。

<style>
    .ui-datepicker-calendar {
        display: none;
    }
</style>

上記のcssは正常に動作します。しかし、ユーザーが月のみを選択できるか、日付も選択できるかを示す変数を渡しています。条件付きスタイリングの一種。

コードは今私にとってこのようなものになります。

<head>
    <link rel="stylesheet" href="styles/jquery-ui.css" />
    <script language="javascript" type="text/javascript" src="js/jquery.js" ></script>
    <script language="javascript" type="text/javascript" src="js/jquery-ui.js"></script>
</head>

//some code here

 <label for="myDate">myDate</label>
 <input type="text" id="myDate" name="myDate" />

//some more code

if(//myTest - This is to test if only months are to be shown)
    {
        $(".ui-datepicker-calendar").css("display", "none");

            $('#myDate').datepicker( {
                changeMonth: true,
                changeYear: true,
                changeDate: false, // This parameter is just for trial. On cross-checking with jquery-ui.js, I found there's no such property. :(
                showButtonPanel: true,
                dateFormat: 'MM yy',
            });

        //$(".ui-datepicker-calendar").css({display: 'none'}); -- This didn't work either
    }
    else
    {
        //normal code for a jquery datepicker
    }

});

さて、上記のコードでは必要な出力が得られません。私は実行する必要があります:

$(".ui-datepicker-calendar").css("display", "none");

上記のコードの myTest が true の場合のみ。

つまり、表示したくない日付ピッカーにまだ日付が表示されています。

助けてください。

4

3 に答える 3

0

これを試して：

function handleDateInput() {

  var $input = $('#myDate');
  var dClass = "ui-normal";

  var dOptions = {
    changeMonth: false,
    changeYear: false,
    dateFormat: 'dd MM yy',
    showButtonPanel: false
  };

  if( $input.data('month-only') === true ) {

    var dFormat = "MM yy";

    dOptions = {
      changeMonth: true,
      changeYear: true,
      showButtonPanel: true,
      dateFormat: dFormat,
      onClose: function( e, ui ) {
        var d = new Date( ui.drawYear , ui.drawMonth , 1);
        $(ui.input).datepicker('setDate', d);
      }
    };

    dClass = "ui-month-only";

  }

  $('#myDate').datepicker( dOptions ).datepicker('widget').addClass( dClass );

};

// these next 2 lines can be run whenever you need
$('#myDate').data('month-only', true);
handleDateInput();

with: .ui-month-only .ui-datepicker-calendar { display: none; }CSS で。そして、これが動作するJSFIDDLEです：http://jsfiddle.net/FgwwT/3/

handleDateInput()ロジックに基づいてデータ オプションを変更するときに関数を呼び出します。

これがあなたが達成したかったことだと思います。:)

于 2013-08-07T12:11:18.470 に答える
0

show()とを使用できますhide()。

$('#myDate').datepicker( {
    changeMonth: true,
    changeYear: true,
    changeDate: false, // This parameter is just for trial. On cross-checking with jquery-ui.js, I found there's no such property. :(
    showButtonPanel: true,
    dateFormat: 'MM yy'
});

if(//myTest - This is to test if only months are to be shown){
    $(".ui-datepicker-calendar").hide();
} else {
    $(".ui-datepicker-calendar").show();
}

datepicker関数の後にそれを追加する必要があります。そうしないと、要素が存在せず、その要素に/を.ui-datepicker-calendar適用できません。hide()show()

于 2013-08-07T12:12:21.867 に答える
0 
<head>
   <style>
       .ui-month-only .ui-datepicker-calendar { display: none; }
   </style>
</head>

//some code

if(//myTest - This is to test if only months are to be shown)
{
        $('#myDate').datepicker( {
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            dateFormat: 'MM yy',
        });

       $('#myDate').datepicker('widget').addClass( "ui-month-only" );
}
else
{
    //normal code for a jquery datepicker that allows a user to show the dates too.
}

みんな、助けてくれてありがとう..これは私のために働いたコードです..しかし、以前のコードが機能しなかった理由はまだわかりません。提案は、主題についてより多くの洞察を得るのに役立ちます。ありがとう。

于 2013-08-07T18:11:01.013 に答える