【�{】几个前端时间插件�ȝ��

wen.ding — Sat, 27 May 2017 06:29:00 GMT

几个前端旉��插�g�ȝ��

�ȝ��一下几�ƾ时间插�Ӟ��分别�?nbsp;
- [ ] jeDate 下蝲地址
- [ ] bootstrap-datetimepicker 下蝲地址
- [ ] My97DatePicker 下蝲地址
- [ ] jQuery UI 插�gDatepicker 下蝲地址

�q�没有哪�Ƒ֮�全超��另外一�ƾ，主要�q�是看是否合适吧�?nbsp;
首先说一下现在项目就在用�?nbsp;jeDate吧�?/p>

jeDate

eDate除了包含日期范围限制、开始日期设定、自定义日期格式、时间戳转换、当天的前后若干天返回、时分秒选择、智能响应、自动纠错、节日识别，操作�{�常规功能外�Q�还拥有更多��近完美的解��x��案�?nbsp;
目前只适合PC端�?nbsp;
因�ؓ(f��)是最�q�新出的�Q�功能比较完善，支持风格切换�Q�显�C��假日�Q�还有很多强大的功能�?nbsp;

如上图所看到的，jeDate 的界面这个样子，值得一提的是，一般时间的input 输入�?是设�|��ؓ(f��)只读的。所以需要其旉��插�g内部提供清空调用功能。而下面要说的 bootstrap-datetimepicker ��没有提供这个功能，需要自�׃��改实现�?nbsp;
同其他插件不同的地方在于�Q�下�Ҏ(gu��)��时分�U�的选项。点击进入相应的讄��界面。需要注意的�?js 中调用方法设�|�前面后面时间相互制�U�的限制
代码如下

var startDate = jeDate({     dateCell:"#start-date",     format:"YYYY-MM-DD hh:mm:ss",     isTime:true,     isinitVal:true,     minDate:jeDate.now(0),     choosefun:function(val) {         endDate.config.minDate = val;         requireDate.config.minDate = val;         $("#start-date").blur();     },     okfun:function(val) {         endDate.config.minDate = val;         requireDate.config.minDate = val;         $("#start-date").blur();     } }); var endDate = jeDate({     dateCell:"#end-date",     format:"YYYY-MM-DD hh:mm:ss",     isTime:true,     minDate:jeDate.now(0),     choosefun:function(val) {         startDate.config.maxDate = val;         $("#end-date").blur();     },     okfun:function(val) {         startDate.config.maxDate = val;         $("#end-date").blur();     } });  var requireDate = jeDate({     dateCell:"#require-date",     format:"YYYY-MM-DD",     isTime:false,     minDate:jeDate.now(0) });

具体参考相关的API

bootstrap-datetimepicker

讄��前后旉��互相制约的方�?/p>

// 初始化第三方插�g ArticleManager.prototype.initVendorComponent = function() {     // 初始化时间插�?    // 讄���只能选今天以前的旉���     $('#createBeginDate').datetimepicker(datetimePickerOptions).on('show',function(e) {             $('#createBeginDate').datetimepicker('setEndDate',new Date());});     $('#createBeginDate').datetimepicker(datetimePickerOptions).on('changeDate',function(e) {             $('#createBeginDate').datetimepicker('setEndDate',new Date());             $('#createEndDate').datetimepicker('setStartDate',$(this).val());});     // 讄���只能选今天以前的旉���     $('#createEndDate').datetimepicker(datetimePickerOptions).on('show',function(e) {                 $('#createEndDate').datetimepicker('setEndDate', new Date());             });     $('#createEndDate').datetimepicker(datetimePickerOptions).on('changeDate',function(e) {                 $('#createEndDate').datetimepicker('setEndDate', new Date());                 $('#createBeginDate').datetimepicker('setStartDate',$(this).val());}); };

和上面图中所看到的，一个主要的�~�陷��是没有原生的清除所选择日期按钮�?nbsp;
我们��目原来用的��是�q�个插�g�Q�后来手动在原生js里面加入了清除按钮�?nbsp;
但去除这一点，�q�个插�g也是没什么问题的。风格是原生的bootstrap 风格�Q�如果需要修改，需要自�׃��性化定制�?nbsp;
但其实也�l�出了没有清除按钮的解决办法�Q?strong style="margin: 0px; padding: 0px;">forceParse �Ҏ(gu��)��Q�设�|��ؓ(f��)true �?x��)强制更改用戯��入的��|��转变为符合规定的�q�似的��|��也就是说�q�样的话不必把输入框讄��成只�ȝ��了�?nbsp;
点到为止�Q�其他欢�q�去看官方API。这个插件��M��上来说也是没什么问题的�?/p>

jquery UI 插�gDatepicker

目前��我所知，jquery UI �q�不是很火的样子�Q�现在前端这些框架更新�P代都很快�Q�以前一些老项目确实有很多直接��Z��q�种框架��d��的，�l��g规范化。��得我们这些后端�h员也能做出像模像��L(f��ng)��前端��面�Q�但是到现在的互联网��实不够用了。这��需要专业的前端人员和设计�h员了�Q�毕竟如果只是单独给企业做项目，更加注重功能的实玎ͼ�而现在的��目更加注重体验�?/p>

  //�{�待dom元素加蝲完毕.       $(function(){           $("#selectDate").datepicker({//��d��日期选择功能           numberOfMonths:1,//昄���几个�?          showButtonPanel:true,//是否昄���按钮面板           dateFormat: 'yy-mm-dd',//日期格式           clearText:"清除",//清除日期的按钮名�U?          closeText:"关闭",//关闭选择框的按钮名称           yearSuffix: '�q?, //�q�的后缀           showMonthAfterYear:true,//是否把月攑֜��q�的后面           defaultDate:'2011-03-10',//默认日期           minDate:'2011-03-05',//最���日�?          maxDate:'2011-03-20',//最大日�?          monthNames: ['一�?,'二月','三月','四月','五月','六月','七月','八月','�?ji��)�?,'十月','十一�?,'十二�?],           dayNames: ['星期�?,'星期一','星期�?,'星期�?,'星期�?,'星期�?,'星期�?],           dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],           dayNamesMin: ['�?,'一','�?,'�?,'�?,'�?,'�?],           onSelect: function(selectedDate) {//选择日期后执行的操作               alert(selectedDate);           }           });       });

如上图所�C�，原生的也是没有日期的清除和时间的限制�Q�这个不��定了）

现在不是�l�常使用的插�Ӟ��但如果需要还是没有问题的�Q�可能需要个性化定制一些�?/p>

My97DatePicker

旉��比较久远的一�ƾ插�Ӟ��功能�q�算丰富�Q�支持日期输入查询�?nbsp;
�q�里我就不再多说�?/p>

起始日期功能

注意:日期格式必须�?realDateFmt �?realTimeFmt 一致而不是与 dateFmt 一�?/p>

有时在项目中需要选择生日之类的日�?而默认点开始日期都是当前日�?��D��q�䆾选择非常�ȝ��,你可以通过起始日期功能加上配置a(ch��n)lwaysUseStartDate属性轻松解��x��c�问�?/p>

日期的范围限制也��比��L(f��ng)��z?/p>

静态限�?nbsp;
注意:日期格式必须�?realDateFmt �?realTimeFmt 一致而不是与 dateFmt 一�?/p>

你可以给通过配置minDate(最��日�?,maxDate(最大日�?为静态日期�?来限定日期的范围

type="text" class="Wdate" id="d414" onfocus="WdatePicker({dateFmt:'H:mm:ss',minDate:'8:00:00',maxDate:'11:30:00'})"/>

动态限�?/p>

你可以通过�pȝ��l�出的动态变�?�?y(当前�q?,%M(当前�?�{�来限度日期范围,你还可以通过{}�q�行表达式运��?�?{%d+1}:表示明天
动态变量表
格式说明
%y 当前�q?nbsp;
%M 当前�?nbsp;
%d 当前�?nbsp;
%ld 本月最后一�?nbsp;
%H 当前�?nbsp;
%m 当前�?nbsp;
%s 当前�U?nbsp;
{} �q�算表达�?�?{%d+1}:表示明天

F{} {}之间是函数可写自定义JS代码

�C�Z��4-2-1 只能选择今天以前的日�?包括今天)

"d421" class="Wdate" type="text" onfocus="WdatePicker({skin:'whyGreen',maxDate:'%y-%M-%d'})"/>

�C�Z��4-2-2 使用了运��表辑ּ� 只能选择今天以后的日�?不包括今�?

"d422" class="Wdate" type="text" onfocus="WdatePicker({minDate:'%y-%M-{%d+1}'})"/>

�C�Z��4-2-3 只能选择本月的日�?可��本月最后一�?/p>

"d423" class="Wdate" type="text" onfocus="WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld'})"/>

�C�Z��4-2-4 只能选择今天7:00:00��x��?1:00:00的日�?/p>

"d424" class="Wdate" type="text" onfocus="WdatePicker({dateFmt:'yyyy-M-d H:mm:ss',minDate:'%y-%M-%d 7:00:00',maxDate:'%y-%M-{%d+1} 21:00:00'})"/>

�C�Z��4-2-5 使用了运��表辑ּ� 只能选择 20��时�?�?30��时�?的日�?/p>

"d425" class="Wdate" type="text" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',minDate:'%y-%M-%d {%H-20}:%m:%s',maxDate:'%y-%M-%d {%H+30}:%m:%s'})"/>

暂时�q�这么多�?/p>

wen.ding 2017-05-27 14:29 发表评论

wen.ding — Tue, 23 May 2017 03:34:00 GMT

Spring MVC Java Struts JSP

可以在controller(spring mvc) 或�?action (struts mvc)
中直接��用CommonsMultipartResolver

Java代码

1 Controller{
2
3 //创徏一个通用的多部分解析�?
4    CommonsMultipartResolver commonsMultipartResolver = new
5 CommonsMultipartResolver(request.getSession().getServletContext());
6 //讄��~�码
7    commonsMultipartResolver.setDefaultEncoding(”utf-8″);
8  //判断 request 是否有文件上�?卛_��部分��h��
9  if (commonsMultipartResolver.isMultipart(request))
10    {
11       //转换成多部分request
12       MultipartHttpServletRequest multipartRequest =
13     commonsMultipartResolver.resolveMultipart(request);
14
15    // file 是指文�g上传标签�?nbsp;name=�?nbsp;
16     // �Ҏ(gu��)�� name 获取上传的文�?img src="http://www.tkk7.com/Images/dot.gif" alt="" />
17     MultipartFile file = multipartRequest.getFile("file");
18
19     //上传后记录的文�g
20     File imageFile = new File("fileName");
21     //上传
22     file.transferTo(imageFile);
23
24     }

25 }

[java] view plain copy

...Controller...{
//创徏一个通用的多部分解析�?
CommonsMultipartResolver commonsMultipartResolver = new
CommonsMultipartResolver(request.getSession().getServletContext());
//讄��~�码
commonsMultipartResolver.setDefaultEncoding(”utf-8″);
//判断 request 是否有文件上�?卛_��部分��h��...
if (commonsMultipartResolver.isMultipart(request))
{
//转换成多部分request
MultipartHttpServletRequest multipartRequest =
commonsMultipartResolver.resolveMultipart(request);
// file 是指文�g上传标签�?nbsp;name=�?nbsp;
// �Ҏ(gu��)�� name 获取上传的文�?..
MultipartFile file = multipartRequest.getFile("file");
//上传后记录的文�g...
File imageFile = new File("fileName");
//上传...
file.transferTo(imageFile);
}
}

也可以在spring配置文�g中配�|?nbsp;

Java代码

也可以在Spring的配�|�文件中��d��
Xml代码
8″ />

[java] view plain copy

也可以在Spring的配�|�文件中��d��
Xml代码
8″ />

jsp code

Java代码

File:
1002″/>

==========================分割�U?=================================================================

另外一��，也是关于spring MVC上传文�g的，也放到这里吧

转蝲自：(x��) http://mn960mn.blog.163.com/blog/static/11410308420109493440818/

spring mvc 上传文�g�Q�注解）

2010-10-04 09:34:40| 分类�Q?nbsp;spring | 标签�Q?/span>上传文�g spring mvc |字号�?/span>�?/span>��?/span> 订阅

package net.hqit.action;

import java.io.File;
import java.io.IOException;

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.util.FileCopyUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;

@Controller
public class FileUploadController {

   @RequestMapping(value="/upload.do",method=RequestMethod.POST)
   public String upload(@RequestParam("imageFile") MultipartFile image,HttpServletRequest request) throws IOException
   {
       String path = request.getRealPath("/upload");
       request.setAttribute("name",image.getOriginalFilename());
       request.setAttribute("img","");
       FileCopyUtils.copy(image.getBytes(),new File(path+"/"+image.getOriginalFilename()));
       return "ok";
   }
}

spring-servlet.xml

       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xmlns:p="http://www.springframework.org/schema/p"
        xmlns:context="http://www.springframework.org/schema/context"
        xsi:schemaLocation="http://www.springframework.org/schema/beans
           http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
           http://www.springframework.org/schema/context
           http://www.springframework.org/schema/context/spring-context-3.0.xsd">

              class="org.springframework.web.multipart.commons.CommonsMultipartResolver"
          p:defaultEncoding="utf-8" />

别忘了加入commons里的fileupload跟io两个�Q�Ａ�Q�包�Q�这样就可以了�?/div>

wen.ding 2017-05-23 11:34 发表评论

亚洲成A人片77777国产,亚洲另类无码一区二区三区,久久精品国产99国产精品亚洲

【�{】几个前端时间插件�ȝ��

几个前端旉���插�g�ȝ��

jeDate

bootstrap-datetimepicker

jquery UI 插�gDatepicker

My97DatePicker

F{} {}之间是函数可写自定义JS代码

spring mvc 上传文�g�Q�注解）

几个前端旉��插�g�ȝ��