日期选择器对所有字段使用下拉菜单 JavaScript 和 JQuery W/O 日历

Date Picker Using Dropdown Menu for all fields JavaScript and JQuery W/O Calendar

提问by user1540792

Good day,

再会，

I am trying to create a date picker where all fields (Y M D) are all drop down Menus and automatically the month Selected affects how many days are available to select in the day field.

我正在尝试创建一个日期选择器，其中所有字段 (YMD) 都是下拉菜单，并且所选月份会自动影响天字段中可供选择的天数。

I don't want calendar displayed in any way.

我不希望以任何方式显示日历。

Appreciate any Suggestions on what to do.

欣赏任何关于做什么的建议。

Thanks.

谢谢。

回答by Satya Teja

you can download and include the jquery datepickerfrom here:- and after that include the following js in your page

您可以 从这里下载并包含 jquery datepicker：- 然后在您的页面中包含以下 js

(function()
{

    // initialise the "Select date" link
    $('#date-pick')
        .datePicker(
            // associate the link with a date picker
            {
                createButton:false,
                startDate:(new Date()).asString(),
                endDate:'31/12/2020'
            }
        ).bind(
            // when the link is clicked display the date picker
            'click',
            function()
            {
                updateSelects($(this).dpGetSelected()[0]);
                $(this).dpDisplay();
                return false;
            }
        ).bind(
            // when a date is selected update the SELECTs
            'dateSelected',
            function(e, selectedDate, $td, state)
            {
                updateSelects(selectedDate);
            }
        ).bind(
            'dpClosed',
            function(e, selected)
            {
                updateSelects(selected[0]);
            }
        );

    var updateSelects = function (selectedDate)
    {
        var selectedDate = new Date(selectedDate);
        $('#d option[value=' + selectedDate.getDate() + ']').attr('selected', 'selected');
        $('#m option[value=' + (selectedDate.getMonth()+1) + ']').attr('selected', 'selected');
        $('#y option[value=' + (selectedDate.getFullYear()) + ']').attr('selected', 'selected');
    }
    // listen for when the selects are changed and update the picker
    $('#d, #m, #y')
        .bind(
            'change',
            function()
            {
                var d = new Date(
                            $('#y').val(),
                            $('#m').val()-1,
                            $('#d').val()
                        );
                $('#date-pick').dpSetSelected(d.asString());
            }
        );

    // default the position of the selects to today
    var today = new Date();
    updateSelects(today.getTime());

    // and update the datePicker to reflect it...
    $('#d').trigger('change');
});

by this your datepicker will convert into select boxes with only futer dates selectable in the given range.

这样，您的日期选择器将转换为在给定范围内只能选择未来日期的选择框。

for referance: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerIntoSelects.html

供参考：http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerIntoSelects.html

回答by ?zgür Kaplan

This might help.

这可能会有所帮助。

   $(function () {
            $("#monthSelect").on("change", function () {
                BindDays();
            });
            $("#yearSelect").on("change", function () {
                BindDays();
            });
            BindDays();
        });

        function BindDays() {
            var month = $("#monthSelect").val();
            var dayDropDown = $("#daySelect");
            dayDropDown.empty();
            if (month == 2) {
                for (var i = 1; i <= 28; i++) {
                    dayDropDown.append("<option value=" + i + ">" + i + "</option>");
                }
                var year = $("#yearSelect").val();
                if (parseInt(year) % 4 == 0) {
                    dayDropDown.append("<option value='29'>29</option>");
                }
            }
            else if (month == 4 || month == 6 || month == 9 || month == 11) {
                for (var i = 1; i <= 30; i++) {
                    dayDropDown.append("<option value=" + i + ">" + i + "</option>");
                }
            }
            else {
                for (var i = 1; i <= 31; i++) {
                    dayDropDown.append("<option value=" + i + ">" + i + "</option>");
                }
            }
        }

http://jsfiddle.net/zTTQY/

http://jsfiddle.net/zTTQY/