Ext Js 4的DateField的学习与实例

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:程序效果图


你可能感兴趣的:(Date,ext,validation,dropdown,ExtJs,stylesheet)