BootstrapPlugin - daterangepicker 使用笔记

BootstrapPlugin - daterangepicker 使用笔记

1) 项目中间要用到选择日期范围的控件,因为是基于twitter-bootstrap框架的东西
找到一个插件，自己汉化一下。稍微修改一下源代码即可。(见本文附件)

2) 效果图



3) 因为后端使用的是spring-mvc框架，自己开发一个标注实现数据绑定。(不采用java.util.Date,依赖joda-time.jar)
model:

package com.ztgame.me.ext.model.datetimerange;

import java.io.Serializable;

import org.joda.time.DateTime;

public class DateTimeRange implements Serializable {

	private static final long serialVersionUID = 7099749496174999964L;

	private DateTime startDateTime;
	private DateTime endDateTime;
	
	// ------------------------------------------------------------------------------------
	// 构造方法

	public DateTimeRange() {
		super();
	}

	public DateTimeRange(DateTime startDateTime, DateTime endDateTime) {
		this();
		this.startDateTime = startDateTime;
		this.endDateTime  = endDateTime;
	}

	// ------------------------------------------------------------------------------------

	public DateTime getStartDateTime() {
		return startDateTime;
	}

	public void setStartDateTime(DateTime startDateTime) {
		this.startDateTime = startDateTime;
	}

	public DateTime getEndDateTime() {
		return endDateTime;
	}

	public void setEndDateTime(DateTime endDateTime) {
		this.endDateTime = endDateTime;
	}
}

annotation:

package com.ztgame.me.ext.model.datetimerange;

import java.lang.annotation.Documented;
import java.lang.annotation.ElementType;
import java.lang.annotation.Retention;
import java.lang.annotation.RetentionPolicy;
import java.lang.annotation.Target;

@Documented
@Target({ ElementType.METHOD, ElementType.FIELD, ElementType.PARAMETER })
@Retention(RetentionPolicy.RUNTIME)
public @interface DateTimeRangeFormat {

	public String pattern() default "yyyy/MM/dd";

	public String delimiter() default " - ";

}

  AnnotationFormatterFactory

package com.ztgame.me.ext.model.datetimerange;

import java.io.Serializable;
import java.text.ParseException;
import java.util.HashSet;
import java.util.Locale;
import java.util.Set;

import org.joda.time.DateTime;
import org.joda.time.format.DateTimeFormat;
import org.joda.time.format.DateTimeFormatter;
import org.springframework.format.AnnotationFormatterFactory;
import org.springframework.format.Formatter;
import org.springframework.format.Parser;
import org.springframework.format.Printer;

public class DateTimeRangeFormatAnnotationFormatterFactory implements AnnotationFormatterFactory<DateTimeRangeFormat> {

	@Override
	public Set<Class<?>> getFieldTypes() {
		Set<Class<?>> fieldTypes = new HashSet<Class<?>>();
		fieldTypes.add(DateTimeRange.class);
		return fieldTypes;
	}

	@Override
	public Printer<?> getPrinter(DateTimeRangeFormat annotation, Class<?> fieldType) {
		return new DateTimeRangeFormatter(annotation.pattern(), annotation.delimiter());
	}

	@Override
	public Parser<?> getParser(DateTimeRangeFormat annotation, Class<?> fieldType) {
		return new DateTimeRangeFormatter(annotation.pattern(), annotation.delimiter());
	}

	// ~============================================================================================================================
	
	private static class DateTimeRangeFormatter implements Formatter<DateTimeRange>, Serializable {

		private static final long serialVersionUID = -818656464607971661L;

		private String delimiter;
		private String pattern;

		public DateTimeRangeFormatter(String pattern, String delimiter) {
			this.pattern = pattern;
			this.delimiter = delimiter;
		}

		@Override
		public String print(DateTimeRange object, Locale locale) {
			StringBuilder sb = new StringBuilder();
			sb.append(object.getStartDateTime().toString(pattern));
			sb.append(delimiter);
			sb.append(object.getEndDateTime().toString(pattern));
			return sb.toString();
		}

		@Override
		public DateTimeRange parse(String text, Locale locale) throws ParseException {
			String[] ps = text.split(delimiter);

			DateTimeFormatter format = DateTimeFormat.forPattern(pattern);
			DateTime startDateTime = format.parseDateTime(ps[0]);
			DateTime endDateTime   = format.parseDateTime(ps[1]);
			return new DateTimeRange(startDateTime, endDateTime);
		}
	}
}

spring-mvc 配置

<bean id="conversion-service" class="org.springframework.format.support.FormattingConversionServiceFactoryBean">
	<property name="converters">
		<list>
			<!-- 其他自己实现的converter，跟本列子无关 -->
		</list>
	</property>
	<property name="formatters">
		<list>
			<bean class="com.ztgame.me.ext.model.datetimerange.DateTimeRangeFormatAnnotationFormatterFactory" />
		</list>
	</property>
</bean>

这样一来，就可以吧诸如"1985/06/22 - 2012/11/13"这样的字符串直接绑定到DateTimeRange类上，很方便。

4) 参考资料
插件官网
张开涛SpringMVC教程
bootstrap-daterangepicker.js依赖的date.js官方教程

评论

1 楼 forcer521 2013-03-05  

有几个问题请教下：
1、 如何限制日期选择范围，比如只能选择90之内或3个自然月之内？
2、 怎么控制布局，把确定取消按钮移到最右边呢？