0

I used datepicker plugin to build a custom selector that only gives me the option between the two semesters in a year. It has to be either January-June or July-December.

<script>
$(document).ready(function() {
$( "#semester" ).datepicker({
    stepMonths: 6,
    nextText: "Next semester",
    prevText: "Previous semester",
    monthNames: ["January - June", "", "", "", "", "", "July - December", "", "", "", "", ""]
});
$( "#semester" ).datepicker('setDate', new Date(2012,0,1));
});
</script>

and

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

Well, I can't post images yet, but it basically gives me a one-liner like "January-December ". Scrolling it to the right gives me "July-December 2012", and so on.

I call it using 

<div id="semester" name="semester" class="date-picker"></div>

which inside a standard form with a standard Submit button.

Now, it looks just the way I want, since I don't want an <input type="text">but the problem is that this way the data isn't sent, according to print_r($_POST), but other elements in the form are. I'm obviously missing something here.

NOTE: I decided to use JQuery basically for design preference, since datepicker looks so neat. Although, I realize now that using JQuery for this was probably overkill, but since I've made it this far, I'd like to finish it.

Also, if someone has a better/less complicated and maybe even equally neat idea on how I can accomplish this, please tell me. Thanks in advance.

EDIT: I've found here in SO another topic in which the same problem I'm having is also present: See the answer. Apparently, there's no way to select the date once I hide the days. Perhaps the answer to this will include an event involving setDate? I'm at a loss.

4

1 に答える 1

0

name属性があっても、Div要素はフォーム送信に含まれません。使用したいのは非表示の入力であり、この入力の値を日付ピッカーで変更します。

$( "#semester" ).datepicker({
    stepMonths: 6,
    nextText: "Next semester",
    prevText: "Previous semester",
    monthNames: ["January - June", "", "", "", "", "", "July - December", "", "", "", "", ""],
    onChangeMonthYear: function(year, month) {
        $('#semesterInput').val(month + ", " + year);
    }
});

HTML：

<div id="semester" class="date-picker"> </div>
<input type="hidden" id="semesterInput" name="semester" />

また、jQueryDatepickerのドキュメントも参照してください。

于 2012-10-07T08:10:24.467 に答える