[Work Journal] 日期插件bootstrap-datetimepicker的使用

“云商户平台”项目开发日志:

image

  • 主要是对前几天工作的具体完善工作。
  • 因为需要对日期数据进行选择插入,使用了bootstrap-datetimepicker的前段插件。


bootstrap-datetimepicker插件的使用

插件在页面文件中的使用:/myshare/war/WEB-INF/view/jetx/matrix/ysh/extend/qrCode/qrCodeEdit.jetx

<div class="controls">
	<label class="control-label">二维码启用时间:</label>
	<div data-date="2017-01-01" class="input-append date datepicker">
		<input id="useDate" name="useDate" type="text" value="${dateTimeFormat(model?.useTime)}" data-date-format="yyyy-mm-dd" class="span11" >
		<span class="add-on"><i class="icon-th"></i></span> 
	</div>
</div>

页面文件中引用插件样式文件:

<link href="${ctx}/static-res/sea-modules/matrix/css/datepicker.css" rel="stylesheet" type="text/css" />

JS文件中加载插件相应文件:

	require('matrixPath/bootstrap-datepicker.js');
		
	$(document).ready(function(){
		$('.datepicker').datetimepicker({
    		     format:'yyyy-mm-dd hh:ii:ss',
    		     showMeridian: true,
                   autoclose: true,
                   todayBtn: true,
                   startDate: "1990-01-01 10:00",
    		     pickerPosition:'bottom-left'
    	       });
	});

设置完成后,bootstrap-datetimepicker插件的显示样式如下:

imageimageimage

相应的Controller文件对应的保存方法为:

@RequestMapping("/edit")
	@ResponseBody
	@OperateAction(type="insert", content="编辑二维码信息 ", columnName="二维码管理")
	public String edit(HttpServletRequest request,HttpServletResponse response,ModelMap modelMap, QrCode obj, String id, ActionValueAssistant actionValueAssistant){
		String msg = "false";
		String useDate = actionValueAssistant.getString("useDate");
		DateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
		try{
			if(obj.getId()!=null&&!obj.getId().equals("")){
				QrCode code = qrCodeManager.getObjectById(obj.getId().toString());
				code.setCodeUrl(obj.getCodeUrl());
				code.setStatus(obj.getStatus());
				code.setMerId(obj.getMerId());
				code.setAcqCode(obj.getAcqCode());
				code.setMerchantName(obj.getMerchantName());
				code.setOrgName(obj.getOrgName());
				code.setUseStatus(obj.getUseStatus());
				if(useDate!=null) {
					Date date = format.parse(useDate);
					code.setUseTime(date);
				}
				code.setSysRemark(obj.getSysRemark());
				code.setRemark(obj.getRemark());
				
				qrCodeManager.update(code);
			}else{
				if(useDate!=null) {
					Date date = format.parse(useDate);
					obj.setUseTime(date);
				}
				obj.setDeleteStatus("0");
				obj.setIsFormal(PropertyUtil.isFormal);
				qrCodeManager.saveObject(obj);
			}
			msg = "true";
		}catch(Exception e){
			e.printStackTrace();
		}
		
		return msg;
	}

注意:即使在实体类中设置了Date类型的字段数据,在从前段页面传入Controller类中时,不能使用该实体原始的Date字段名称(这里页面中的Date字段为:useDate,实体中的Date字段为:useTime),在使用如下Post请求传参,Date字段不能自动封装到设置的实体中,需要从Post请求中取出,单独处理后赋值。如果设置为与实体Date字段相同的字段名,则会出现问题。

@RequestMapping("/edit")
@ResponseBody
@OperateAction(type="insert", content="编辑二维码信息 ", columnName="二维码管理")
public String edit(HttpServletRequest request,HttpServletResponse response,ModelMap modelMap, QrCode obj, String id, ActionValueAssistant actionValueAssistant){