Ext JS - Learning Center

Tutorial:Using Calendar

From Learn About the Ext JavaScript Library

Jump to: navigation, search


Summary: Using Calendar
Author: Christian M. Castillo Estrada
Published: January 1, 2009
Ext Version: 2.x
Languages: en.png English fr.png French

Contents

Summary

This tutorial will show you hot to use a Calendar through DateField with its respect date formats. Also it walks about how you to insert a date using PHP / MySQL. I decided to give a contribution to those tutorials and I hope this tutorial will be useful for you!!.

Entry Point

I assume that you already know about PHP/MySQL. I'll explain you how to insert a date through DateField using extJS so that I have created one table called FRIENDS, in this table We'll register personal information about ours friend (Name and Birth date). Let's assume the entry point to this example is index.html, and it is structured as follows:

<html>
	<head>
	<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">	
	<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="ext-all.js"></script>
	<script type="text/javascript" src="mycalendar.js"></script>	
	</head>
	<body></body>
</html>

Obviously, I assume that you should modify the paths to your EXT directory accordingly.


The extJS code mycalendar.js 

// Global vars
var MyForm;
var MyWindow;
var Txt_Name;
var Txt_BirthDate;
 
Ext.onReady(function(){
    Ext.QuickTips.init();
 
function saveNewFriend(){       
 
      Ext.Ajax.request({   
        waitMsg: 'Wait a second...',
        url: 'db_friends.php',
        params: {
                  Name:      Txt_Name.getValue(),                  
                  BirthDate: Txt_BirthDate.getValue().format('d/m/Y')          
        }, 
        success: function(response){              
          var result=eval(response.responseText);
          switch(result){
          case 1:
                  Ext.MessageBox.alert('OK','Your new Friend was created.');
                  MyWindow.hide();
                  break;
          default:
                  Ext.MessageBox.alert('Error','Could not create your Friend.');
                  break;
          }        
        },
        failure: function(response){
          var result=response.responseText;
          Ext.MessageBox.alert('Error','Could not connect to the database');         
        }                      
      });
}
 
 
Txt_Name = new Ext.form.TextField({
    id: 'Name',
    fieldLabel: 'Name',
    minLength : 1,
    maxLength: 20,
    selectOnFocus: true,
    allowBlank: false,
    anchor : '80%',
    maskRe: /([0-9]+)$/
      });
 
Txt_BirthDate = new Ext.form.DateField({
    id: 'BirthDate',
    fieldLabel: 'Birth date',
    vtype: 'daterange',
    format: 'd/m/Y',
    allowBlank: false,
    anchor : '32%'
      });
 
MyForm = new Ext.FormPanel({
        labelAlign: 'top',
	frame:true,
        bodyStyle:'padding:5px 5px 0',
        width: 390,
	buttonAlign:'right',
	items: [Txt_Name, Txt_BirthDate],    	
	buttons: [{
	      text: 'Save',
      	      handler: saveNewFriend
	    },{
      	      text: 'Cancel',
	      handler: function(){
      	           MyWindow.hide();
	    }
    }]
    });
 
MyWindow = new Ext.Window({
      id: 'MyWindow',
      title: 'New Friend',
      closable:true,
      width: 350,
      height: 240,
      plain:true,
      layout: 'fit',      
      items: MyForm,
      form:  MyForm.getForm(),
      listeners: {
	"show" : function() {
		var firstElem = MyForm.getForm().findField(0);
		firstElem.focus.defer(150, firstElem);				
  	        }
	}
    }); 
MyWindow.show(); 
 
});

Ext.form.DateField

This class provides a date input field with a Ext.DatePicker dropdown and automatic date validation. You can set the Date Format 'd/m/Y' and the value to initialize this field.

Txt_BirthDate = new Ext.form.DateField({
    id: 'BirthDate',
    fieldLabel: 'Birth date',    
    format: 'd/m/Y',                  <---- Format d/m/Y, Y-m-d, y-m-d ... 
    value: new Date('02/01/2009'),    <---- Value to initialize 
    minValue: '02/01/2009',           <---- The minimum allowed date
    maxValue: '31/01/2009',           <---- The maximum allowed date
    allowBlank: false,
    anchor : '32%'
      });

You can visit this linkfor more information about the DateField.

db_friends.php

I'm going to paste the following code to show the connection to database for creating ours friend. First, we'll need to connect to the database. Second, the process for creating a new friend. Finally, we'll need to encode the Date.

<?php
 
// This will connect us to our database...
mysql_connect("localhost", "root", "pass") or die("Could not connect: ". mysql_error());
mysql_select_db("example");
 
 
//This will insert a new friend into our database...
  $p1 = $_POST['Name'];
  $p2 = encodeDate($_POST['BirthDate']);
 
  $query = "INSERT INTO my_friends (Name, BirthDate) VALUES ('$p1','$p2')";
  $result = mysql_query($query);
  echo '1';
 
 
//This function encodes a (dd/mm/YYYY) to (YYYY-mm-dd) 
function encodeDate ($date) {
  $tab = explode ("/", $date);
  $r = $tab[2]."-".$tab[1]."-".$tab[0];
  return $r;
}
 
?>

As you can see, I used a function called encodeDate, It converts the Date to MySQL's Date Format. The result is YYYY-mm-dd, this format you should use when we set a field as Date (Type) in MySQL.

This ends the tutorial. I hope it helped you figure out how to use a DateField and thanks.

Christian M. Castillo (Mexico)
christianmce@gmail.com. <nowiki>Insert non-formatted text here</nowiki>

Retrieved from "http://www.extjs.com/learn/Tutorial:Using_Calendar"
  • This page was last modified on 18 June 2009, at 14:21.
  • This page has been accessed 13,710 times.