jQuery which is quite handy中有一个内置的日期选择器,但是它的问题是我不能将它用于出生日期这样的字段,因为它没有年份和月份的combox框,所以一个人必须点击很多才能回到1980年左右。见图:
是否有可用下拉菜单的免费日期选择器,或者我是否可以使用参数更改此选项?
答案 0 :(得分:3)
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);
答案 1 :(得分:0)
试试这个http://keith-wood.name/datepickRef.html 我已经使用了很长时间..
答案 2 :(得分:0)
$("#datepicker").datepicker({
yearRange: "-20:+0"
});
这应该调整datepicker的年份范围:)
答案 3 :(得分:0)
我想你想要下面这样的东西。试试这个, 我修改了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("‹");
backwards.setStyleName(BASE_NAME + "PreviousButton");
forwards = new PushButton();
forwards.getUpFace().setHTML("›");
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("«");
backwardsYear.setStyleName(BASE_NAME + "PreviousButton");
forwardsYear = new PushButton();
forwardsYear.getUpFace().setHTML("»");
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();
}
}