Sencha Inc. | HTML5 Apps

Using Calendar

Published Jan 02, 2009 | Christian M. Castillo Estrada | Tutorial | Easy
Last Updated Jul 11, 2011

This Tutorial is most relevant to Ext JS, 2.x, 3.x.


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.

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:

	<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>	

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;
function saveNewFriend(){       
        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);
          case 1:
                  Ext.MessageBox.alert('OK','Your new Friend was created.');
                  Ext.MessageBox.alert('Error','Could not create your Friend.');
        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',
        bodyStyle:'padding:5px 5px 0',
        width: 390,
	items: [Txt_Name, Txt_BirthDate],    	
	buttons: [{
	      text: 'Save',
      	      handler: saveNewFriend
      	      text: 'Cancel',
	      handler: function(){
MyWindow = new Ext.Window({
      id: 'MyWindow',
      title: 'New Friend',
      width: 350,
      height: 240,
      layout: 'fit',      
      items: MyForm,
      form:  MyForm.getForm(),
      listeners: {
	"show" : function() {
		var firstElem = MyForm.getForm().findField(0);
		firstElem.focus.defer(150, firstElem);				


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.


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.

// This will connect us to our database...
mysql_connect("localhost", "root", "pass") or die("Could not connect: ". mysql_error());
//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.

Share this post:
Leave a reply

Written by Christian M. Castillo Estrada

Commenting is not available in this channel entry.