javascript - 带有几个月和几年下拉菜单的日期选择器

Question

jQuery中有一个内置的日期选择器，非常方便，但它的问题是我不能将它用于出生日期等字段，因为它没有年份和月份的组合框，所以必须单击很多事情要追溯到 1980 年左右。见图：

是否有带有下拉菜单的免费日期选择器，或者我是否可以使用参数更改此日期选择器？

Answer 1

datepicker 有你需要的所有选项，还有更多。

              $("#endDatepicker").datepicker({ 
                showOn: 'button', 
                buttonImageOnly: true, 
                buttonImage: './common/images/icon_cal.png',
                changeMonth: true,
                changeYear: true,
                dateFormat: 'dd-mm-yy',
                yearRange: "-10:+2"     });
            $("#endDatepicker").datepicker('setDate', today);

Answer 2

试试这个http://keith-wood.name/datepickRef.html 我已经用了很长时间了..

Answer 3

$("#datepicker").datepicker({ 
    yearRange: "-20:+0"
});

这应该调整日期选择器的年份范围:)

Answer 4

我想你想要像下面这样的东西。试试这个，我修改了 GWT DatePicker 以在其上添加月份和年份选择器。我已指定日历范围最大为 2100 ，您可以根据自己的意愿通过对其进行一些小的更改来修改它

import com.google.gwt.user.datepicker.client.CalendarModel;
import com.google.gwt.user.datepicker.client.DatePicker;
import com.google.gwt.user.datepicker.client.DefaultCalendarView;
public class DatePickerWithYearSelectorNew extends DatePicker {

    public DatePickerWithYearSelectorNew() {
        super(new MonthAndYearSelectorWithYear(), new DefaultCalendarView(),
                new CalendarModel());
    MonthAndYearSelectorWithYear monthSelector = (MonthAndYearSelectorWithYear)            
this.getMonthSelector();
        monthSelector.setPicker(this);
            monthSelector.setModel(this.getModel());
    }
    public void refreshComponents() {
        super.refreshAll();
    }
}    
import java.util.Date;
import com.google.gwt.event.dom.client.ChangeEvent;
import com.google.gwt.event.dom.client.ChangeHandler;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Grid;
import com.google.gwt.user.client.ui.ListBox;
import com.google.gwt.user.client.ui.PushButton;
import com.google.gwt.user.client.ui.HTMLTable.CellFormatter;
import com.google.gwt.user.datepicker.client.CalendarModel;
import com.google.gwt.user.datepicker.client.MonthSelector;    



public class MonthAndYearSelectorWithYear extends MonthSelector {

    private static String BASE_NAME = "datePicker";
    private PushButton backwards;
    private PushButton forwards;
    private PushButton backwardsYear;
    private PushButton forwardsYear;
    private Grid grid;
    private int previousYearColumn = 0;
    private int previousMonthColumn = 1;

    private int nextMonthColumn = 4;
    private int nextYearColumn = 5;
    private CalendarModel model;
    private DatePickerWithYearSelectorNew picker;

    private ListBox monthListBox;
    private ListBox yearListBox;

    public MonthAndYearSelectorWithYear() {

        yearListBox = new ListBox();

        for (int i = 1900; i < 2100; i++) {
            yearListBox.addItem(i + "");
        }

        String[] items = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul",
                "Aug", "Sep", "Oct", "Nov", "Dec" };

        monthListBox = new ListBox();

        for (int i = 0; i < items.length; i++) {
            monthListBox.addItem(items[i]);
        }

    }

    public void setModel(CalendarModel model) {
        this.model = model;
    }

    public void setPicker(DatePickerWithYearSelectorNew picker) {
        this.picker = picker;
    }

    @Override
    protected void refresh() {
        int monthIndex = getModel().getCurrentMonth().getMonth();
        monthListBox.setItemSelected(monthIndex, true);
        int yearIndex = getModel().getCurrentMonth().getYear();
        // System.out.println(yearIndex);
        yearListBox.setItemSelected(yearIndex, true);
    }

    @Override
    protected void setup() {
        // Set up backwards.
        backwards = new PushButton();
        backwards.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                addMonths(-1);
            }
        });

        backwards.getUpFace().setHTML("&lsaquo;");
        backwards.setStyleName(BASE_NAME + "PreviousButton");

        forwards = new PushButton();
        forwards.getUpFace().setHTML("&rsaquo;");
        forwards.setStyleName(BASE_NAME + "NextButton");
        forwards.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                if (model.getCurrentMonth().getYear() < 199) {
                    addMonths(+1);
                }
                else if(model.getCurrentMonth().getMonth()<11 
                                     &&model.getCurrentMonth().getYear()==199)
                {
                    addMonths(+1);
                }
            }
        });

        // Set up backwards year
        backwardsYear = new PushButton();
        backwardsYear.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {

                addMonths(-12);
                picker.refreshComponents();
            }
        });

        backwardsYear.getUpFace().setHTML("&laquo;");
        backwardsYear.setStyleName(BASE_NAME + "PreviousButton");

        forwardsYear = new PushButton();
        forwardsYear.getUpFace().setHTML("&raquo;");
        forwardsYear.setStyleName(BASE_NAME + "NextButton");
        forwardsYear.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                if (model.getCurrentMonth().getYear() < 199) {
                    addMonths(+12);
                    picker.refreshComponents();
                }
            }
        });

        yearListBox.addChangeHandler(new ChangeHandler() {

            @Override
            public void onChange(ChangeEvent event) {
                // int yearIndex = yearListBox.getSelectedIndex();
                //     
              setYear(Integer.parseInt(yearListBox.getValue(yearIndex)));
                setYear(yearListBox.getSelectedIndex());
            }
        });
        monthListBox.addChangeHandler(new ChangeHandler() {

            @Override
            public void onChange(ChangeEvent event) {
                int monthIndex = monthListBox.getSelectedIndex();
                setMonth(monthIndex);
            }
        });

        // Set up grid.
        grid = new Grid(1, 6);
        grid.setWidget(0, previousYearColumn, backwardsYear);
        grid.setWidget(0, previousMonthColumn, backwards);
        grid.setWidget(0, 2, monthListBox);
        grid.setWidget(0, 3, yearListBox);
        grid.setWidget(0, nextMonthColumn, forwards);
        grid.setWidget(0, nextYearColumn, forwardsYear);

        CellFormatter formatter = grid.getCellFormatter();

        formatter.setWidth(0, previousYearColumn, "1");
        formatter.setWidth(0, previousMonthColumn, "1");

        formatter.setWidth(0, nextMonthColumn, "1");
        formatter.setWidth(0, nextYearColumn, "1");
        grid.setStyleName(BASE_NAME + "MonthSelector");
        initWidget(grid);
    }

    public void addMonths(int numMonths) {
        model.shiftCurrentMonth(numMonths);
        picker.refreshComponents();
    }

    @SuppressWarnings("deprecation")
    public void setMonth(int month) {
        Date tempMonth = new Date();
        tempMonth.setMonth(month);

        model.setCurrentMonth(tempMonth);
        picker.refreshComponents();
    }

    @SuppressWarnings("deprecation")
    public void setYear(int year) {
        // to set year
        model.getCurrentMonth().setYear(year);
        picker.refreshComponents();
    }
}