Ext Js 4的DateField的学习与实例

最新推荐文章于 2021-02-23 12:22:38 发布

波哥的技术积累

最新推荐文章于 2021-02-23 12:22:38 发布

阅读量2.9k

点赞数 1

分类专栏： Ext Js 文章标签： ext extjs dropdown date stylesheet validation

本文链接：https://blog.csdn.net/woshisap/article/details/6663159

版权

Ext Js 专栏收录该内容

61 篇文章 1 订阅

订阅专栏

1：基本知识

Provides a date input field with a date picker dropdown and automatic datevalidation.

This field recognizes and uses the JavaScript Date object as its main value type. In addition,it recognizes string values which are parsed according to the format and/or altFormatsconfigs. These may be reconfigured to use date formats appropriate for the user's locale.

The field may be limited to a certain range of dates by using the minValue, maxValue, disabledDays, and disabledDates config parameters. These configurations will be used bothin the field's validation, and in the date picker dropdown by preventing invalid dates from being selected.

2：程序代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>datefield</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">

	<link rel="stylesheet" type="text/css" href="ExtJS4/resources/css/ext-all.css" />
    <script type="text/javascript" src="ExtJS4/bootstrap.js"></script>
    
    <script type="text/javascript" src="ExtJS4/ext-all.js" ></script>
    <script type="text/javascript" src="ExtJS4/locale/ext-lang-zh_CN.js"></script>	
    
     <script type="text/javascript" >
      Ext.onReady(function() {
      
      var button = Ext.create('Ext.Button', {
				    text: '显示出生日期的值',     
				    handler: function() {
				        Ext.MessageBox.alert('出生日期', birthday.getValue().toLocaleString());
				    }
	   });
	   
	  var birthday = new Ext.form.field.Date({
	        id: 'birth',
	    	xtype: 'datefield',
	        anchor: '100%',
	        fieldLabel: '出生日期',
	        name: 'birth',
	        format: 'Y-m-d',
	        maxValue: new Date()  // limited to the current date or prior
	  });
        Ext.create('Ext.form.FormPanel', {
		    title      : '您的出生日期',
		    width      : 400,
		    autoHight  : true,
		    bodyPadding: 10,
		    frame: true,
		    labelSeparator: ':',
		    labelWidth: 60,
		    labelAlign: 'left',
		    renderTo   : 'form1',
		    items: [
		     birthday
		    ],
		    buttons: [
		      	button
		    ]
		}); 
		
	   });
   </script>
  </head>
  
  <body>
     <div id="form1"></div>
  </body>
  
</html>

3：程序效果图

波哥的技术积累

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ext Js 4的DateField的学习与实例

1：基本知识 Provides a date input field with a date picker dropdown and automatic datevalidation.This field recognizes and uses the Java
复制链接

扫一扫