JavaScript DHTML/Ext JS/Date Field

Материал из Web эксперт
Перейти к: навигация, поиск

Add date picker field to FormPanel

   <source lang="html4strict">
 

<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <body> <script type="text/javascript"> Ext.onReady(function() {

   new Ext.FormPanel({ 
     url: "your.php",
     renderTo: Ext.getBody(),
     frame: true,
     title: "Title",
     width: 250,
     items: [
         {
           xtype: "textfield",
           fieldLabel: "Title",
           name: "title"
           },
           {
           xtype: "datefield",
           fieldLabel: "Released",
           name: "released"
           }
       ]
   });

}); </script>

asdf

</body> </html>


 </source>
   
  


Create a date field and add to window

   <source lang="html4strict">
 

<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <body> <script type="text/javascript"> Ext.onReady(function() {

   Ext.QuickTips.init();
   
   var dateField = {
     xtype      : "datefield",
     fieldLabel : "Date",
     anchor     : "100%"
   }
     
   new Ext.Window({
     title      : "",
     layout     : "form",
     labelWidth : 100,
     height     : 70,
     width      : 250,
     bodyStyle  : "padding: 5px",
     items      : dateField
   }).show();

}); </script>

asdf

</body> </html>


 </source>
   
  


DateField: allow blank

   <source lang="html4strict">
 

<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <script type="text/javascript"> Ext.onReady(function(){

 var formPanel = new Ext.form.FormPanel({
   title:"DateField Example",
   applyTo:"mainContent",
   layout:"form",
   labelAlign:"top",
   width:210,
   autoHeight:true,
   frame:true,
   items:[{
     xtype:"datefield",
     fieldLabel:"Date of Birth",
     name:"dob",
     width:190,
     allowBlank:false
   }]
 });

});</script> <body>

</body> </html>


 </source>
   
  


Disable days in date picker

   <source lang="html4strict">
 

<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <body> <script type="text/javascript"> Ext.onReady(function() {

   new Ext.FormPanel({ 
     url: "your.php",
     renderTo: Ext.getBody(),
     frame: true,
     title: "Title",
     width: 250,
     items: [
         {
           xtype: "textfield",
           fieldLabel: "Title",
           name: "title"
           },
           {
           xtype: "datefield",
           fieldLabel: "Released",
           name: "released",
           disabledDays: [1,2,3,4,5]
           }
       ]
   });

}); </script>

asdf

</body> </html>


 </source>
   
  


Ext.form.DateField allowBlank

   <source lang="html4strict">
 

<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head>

<body> <script type="text/javascript"> /*!

* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/

// some data used in the examples Ext.namespace("Ext.exampledata"); Ext.exampledata.states = [

       ["AL", "Alabama", "The Heart of Dixie"],
       ["AK", "Alaska", "The Land of the Midnight Sun"],
       ["AZ", "Arizona", "The Grand Canyon State"],
       ["AR", "Arkansas", "The Natural State"],
       ["CA", "California", "The Golden State"],
       ["CO", "Colorado", "The Mountain State"],
       ["CT", "Connecticut", "The Constitution State"],
       ["DE", "Delaware", "The First State"],
       ["DC", "District of Columbia", "The Nation"s Capital"],
       ["FL", "Florida", "The Sunshine State"],
       ["GA", "Georgia", "The Peach State"],
       ["HI", "Hawaii", "The Aloha State"],
       ["ID", "Idaho", "Famous Potatoes"],
       ["IL", "Illinois", "The Prairie State"],
       ["IN", "Indiana", "The Hospitality State"],
       ["IA", "Iowa", "The Corn State"],
       ["KS", "Kansas", "The Sunflower State"],
       ["KY", "Kentucky", "The Bluegrass State"],
       ["LA", "Louisiana", "The Bayou State"],
       ["ME", "Maine", "The Pine Tree State"],
       ["MD", "Maryland", "Chesapeake State"],
       ["MA", "Massachusetts", "The Spirit of America"],
       ["MI", "Michigan", "Great Lakes State"],
       ["MN", "Minnesota", "North Star State"],
       ["MS", "Mississippi", "Magnolia State"],
       ["MO", "Missouri", "Show Me State"],
       ["MT", "Montana", "Big Sky Country"],
       ["NE", "Nebraska", "Beef State"],
       ["NV", "Nevada", "Silver State"],
       ["NH", "New Hampshire", "Granite State"],
       ["NJ", "New Jersey", "Garden State"],
       ["NM", "New Mexico", "Land of Enchantment"],
       ["NY", "New York", "Empire State"],
       ["NC", "North Carolina", "First in Freedom"],
       ["ND", "North Dakota", "Peace Garden State"],
       ["OH", "Ohio", "The Heart of it All"],
       ["OK", "Oklahoma", "Oklahoma is OK"],
       ["OR", "Oregon", "Pacific Wonderland"],
       ["PA", "Pennsylvania", "Keystone State"],
       ["RI", "Rhode Island", "Ocean State"],
       ["SC", "South Carolina", "Nothing Could be Finer"],
       ["SD", "South Dakota", "Great Faces, Great Places"],
       ["TN", "Tennessee", "Volunteer State"],
       ["TX", "Texas", "Lone Star State"],
       ["UT", "Utah", "Salt Lake State"],
       ["VT", "Vermont", "Green Mountain State"],
       ["VA", "Virginia", "Mother of States"],
       ["WA", "Washington", "Green Tree State"],
       ["WV", "West Virginia", "Mountain State"],
       ["WI", "Wisconsin", "America"s Dairyland"],
       ["WY", "Wyoming", "Like No Place on Earth"]
   ];

/*!

* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/

Ext.onReady(function(){

   Ext.QuickTips.init();
   // turn on validation errors beside the field globally
   Ext.form.Field.prototype.msgTarget = "side";
   var fs = new Ext.FormPanel({
       frame: true,
       title:"XML Form",
       labelAlign: "right",
       labelWidth: 85,
       width:340,
       waitMsgTarget: true,
       // configure how to read the XML Data
       reader : new Ext.data.XmlReader({
           record : "contact",
           success: "@success"
       }, [
           {name: "first", mapping:"name/first"}, // custom mapping
           {name: "last", mapping:"name/last"},
           "company", "email", "state",
           {name: "dob", type:"date", dateFormat:"m/d/Y"} // custom data types
       ]),
       // reusable eror reader class defined at the end of this file
       errorReader: new Ext.form.XmlErrorReader(),
       items: [
           new Ext.form.FieldSet({
               title: "Contact Information",
               autoHeight: true,
               defaultType: "textfield",
               items: [{
                       fieldLabel: "First Name",
                       name: "first",
                       width:190
                   }, {
                       fieldLabel: "Last Name",
                       name: "last",
                       width:190
                   }, {
                       fieldLabel: "Company",
                       name: "company",
                       width:190
                   }, {
                       fieldLabel: "Email",
                       name: "email",
                       vtype:"email",
                       width:190
                   },
                   new Ext.form.ruboBox({
                       fieldLabel: "State",
                       hiddenName:"state",
                       store: new Ext.data.ArrayStore({
                           fields: ["abbr", "state"],
                           data : Ext.exampledata.states // from states.js
                       }),
                       valueField:"abbr",
                       displayField:"state",
                       typeAhead: true,
                       mode: "local",
                       triggerAction: "all",
                       emptyText:"Select a state...",
                       selectOnFocus:true,
                       width:190
                   }),
                   new Ext.form.DateField({
                       fieldLabel: "Date of Birth",
                       name: "dob",
                       width:190,
                       allowBlank:false
                   })
               ]
           })
       ]
   });
   // simple button add
   fs.addButton("Load", function(){
       fs.getForm().load({url:"ext-3.0.0/examples/form/xml-form.xml", waitMsg:"Loading"});
   });
   // explicit add
   var submit = fs.addButton({
       text: "Submit",
       disabled:true,
       handler: function(){
           fs.getForm().submit({url:"ext-3.0.0/examples/form/xml-errors.xml", waitMsg:"Saving Data..."});
       }
   });
   fs.render("form-ct");
   fs.on({
       actioncomplete: function(form, action){
           if(action.type == "load"){
               submit.enable();
           }
       }
   });

}); // A reusable error reader class for XML forms Ext.form.XmlErrorReader = function(){

   Ext.form.XmlErrorReader.superclass.constructor.call(this, {
           record : "field",
           success: "@success"
       }, [
           "id", "msg"
       ]
   );

}; Ext.extend(Ext.form.XmlErrorReader, Ext.data.XmlReader); </script>

</body> </html>


 </source>
   
  


Show two date fields acting as a date range

   <source lang="html4strict">
 

<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head>

<body> <script type="text/javascript"> /*!

* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/

// Add the additional "advanced" VTypes Ext.apply(Ext.form.VTypes, {

   daterange : function(val, field) {
       var date = field.parseDate(val);
       if(!date){
           return;
       }
       if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
           var start = Ext.getCmp(field.startDateField);
           start.setMaxValue(date);
           start.validate();
           this.dateRangeMax = date;
       } 
       else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
           var end = Ext.getCmp(field.endDateField);
           end.setMinValue(date);
           end.validate();
           this.dateRangeMin = date;
       }
       /*
        * Always return true since we"re only using this vtype to set the
        * min/max allowed values (these are tested for after the vtype test)
        */
       return true;
   },
   password : function(val, field) {
       if (field.initialPassField) {
           var pwd = Ext.getCmp(field.initialPassField);
           return (val == pwd.getValue());
       }
       return true;
   },
   passwordText : "Passwords do not match"

});

Ext.onReady(function(){

   Ext.QuickTips.init();
   // turn on validation errors beside the field globally
   Ext.form.Field.prototype.msgTarget = "side";
   var bd = Ext.getBody();
   /*
    * Date Range  
    */
   
   var dr = new Ext.FormPanel({
     labelWidth: 125,
     frame: true,
     title: "Date Range",
   bodyStyle:"padding:5px 5px 0",
   width: 350,
     defaults: {width: 175},
     defaultType: "datefield",
     items: [{
       fieldLabel: "Start Date",
       name: "startdt",
       id: "startdt",
       vtype: "daterange",
       endDateField: "enddt" // id of the end date field
     },{
       fieldLabel: "End Date",
       name: "enddt",
       id: "enddt",
       vtype: "daterange",
       startDateField: "startdt" // id of the start date field
     }]
   });
   dr.render("dr");

}); </script>

</body> </html>


</source>