Tag: Date

date time Input Type: HTML5

Today lets learn some very important input types of HTML5:

datetime
datetime-local
date
time
week
month

form-input-type-date-time-type-html5

datetime input type is supported by Opera browser, but as of now(2013), Google Chrome doesn’t support it. All other input date time related input types are supported by Google Chrome.

HTML file: month input type
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

< !DOCTYPE html>
<html>
<head>
<title>date picker: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
</head>
<body>
 
<form>
<label for="dt">Date: </label>
 <input name="dt" type="month" min="2013-01" max="2013-09"/>
 <input type="submit"/>
</form>
 
</body>
</html>

Here we have a month type input field which has a minimum allowed month as 2013-01 and a maximum allowed month as 2013-09.

HTML file: date input type
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

< !DOCTYPE html>
<html>
<head>
<title>date picker: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
</head>
<body>
 
<form>
<label for="dt">Date: </label>
 <input name="dt" type="date"/>
 <input type="submit"/>
</form>
 
</body>
</html>

Here we have a date input type, which shows a date picker in the UI.

HTML file: time input type
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

< !DOCTYPE html>
<html>
<head>
<title>date picker: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
</head>
<body>
 
<form>
<label for="dt">Date: </label>
 <input name="dt" type="time"/>
 <input type="submit"/>
</form>
 
</body>
</html>

Here we have a time input type, we could even specify the fractional seconds. Look for the syntax at the end of this post.

HTML file: datetime input type
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

< !DOCTYPE html>
<html>
<head>
<title>date picker: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
</head>
<body>
 
<form>
<label for="dt">Date: </label>
 <input name="dt" type="datetime"/>
 <input type="submit"/>
</form>
 
</body>
</html>

datetime input type which signifies Universal Time Convention(UTC).

HTML file: datetime-local input type
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

< !DOCTYPE html>
<html>
<head>
<title>date picker: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
</head>
<body>
 
<form>
<label for="dt">Date: </label>
 <input name="dt" type="datetime-local"/>
 <input type="submit"/>
</form>
 
</body>
</html>

Here we have a datetime-local input type, which takes the input based on the local time zone of the user’s machine.

HTML file: week input type
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

< !DOCTYPE html>
<html>
<head>
<title>date picker: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
</head>
<body>
 
<form>
<label for="dt">Date: </label>
 <input name="dt" type="week"/>
 <input type="submit"/>
</form>
 
</body>
</html>

week input type gives date picker UI and allows user to select the entire date.

Form Input Type – date time: HTML5


[youtube https://www.youtube.com/watch?v=VKRuSryBaNk]

YouTube Link: https://www.youtube.com/watch?v=VKRuSryBaNk [Watch the Video In Full Screen.]



Related Read: Format Date and Insert Into Database Table: PHP

Note:
We can specify value, min, max and step attributes for all these input types. And the format for it is as shown below:

date YYYY-MM-DD default step 60 seconds

time HH:MM:SS.FF default step 1 Day (SS.FF means seconds and fractional seconds)

datetime YYYY-MM-DDTHH:MM:SS.FFZ default step 60 seconds (T and Z means the TimeZone, these alphabets/characters must be literally present in the format)

datetime-local YYYY-MM-DDTHH:MM:SS.FF default step 60 seconds (albhabet/character/letter T must be literally present in the format)

week YYYY-WNN default step of 1 week (letter W means the week, this alphabet/characters must be literally present in the format)

month YYYY-MM default step of 1 month

ObjectId ( _id ) as Primary Key: MongoDB

In this video tutorial we shall learn more about ObjectId( _id ) of MongoDB document.

ObjectId is a primary key in any mongoDB document.
We can’t change document id once it has been created and inserted.
If we do not explicitly assign value to _id, then it’ll be automatically assigned and inserted.
We can’t have same document id for more than 1 document.

These ObjectId’s are of BSON datatype.
It’s a 12-byte value.

Basically, each _id is a combination of ..
– Time the document/record was saved/inserted
– Host name of the machine/server it’s running on
– Process id of the server process
– and a random incremental number

Example documents

mongoDB-collection-document

Since the ObjectId‘s are formed taking time of insertion of document into consideration, we can extract this time using getTimestamp() method.

1

db.info.find()[0]._id.getTimestamp()

Custom _id values
We can explicitly define the _id value and in such case system won’t add it for us.

1
2
3
4
5

db.info.insert({
   _id    : 2,
   name   : "Google",
   product: "Google Glass"
})

output

1
2
3
4
5
6

>db.info.find().forEach(printjson)
{
"_id"    : 2,
"name"   : "Google",
"product": "Google Glass"
}

If you insert ObjectId yourselves, then having a separate ‘document_created_at’ field becomes necessary depending on your application requirements.

For that, you can use a inbuilt method Date()

1
2

> new Date()
ISODate("2013-05-01T07:55:12.467Z")

Date is actually a class, but it calls upon the constructor method, hence returning current system/server timestamp, in ISO format.

Remove / Delete / Drop Document

1

db.info.remove({ _id: 2 })

To remove a document, simply pass in a unique { key: value } pair and the document gets deleted/removed.

Primary Key in MongoDB: ObjectId


[youtube https://www.youtube.com/watch?v=YCZV5N01Oqs]

YouTube Link: https://www.youtube.com/watch?v=YCZV5N01Oqs [Watch the Video In Full Screen.]



Navigation of Documents
To navigate between documents, use the index numbers, and to select particular field use it’s key name.

To get the _id of first document

1

db.info.find()[0]._id

0 is the index of first document or record. _id is the field/key name.

Format Date and Insert Into Database Table: PHP

Convert string type variable data to formatted date type variable and insert it into database table..

Connecting the PHP Script to database
db.php

1
2
3
4

< ?php
$conn = mysql_connect("localhost","username","password");
$db      = mysql_select_db("table_name",$conn);
?>

Our database name is technotip and table name is temp.
date-time.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

< ?php
       include_once('db.php');
 
// [created_at] => Sun Mar 23 06:39:16 +0000 2008
 
$raw = "Sun Mar 23 06:39:16 +0000 2008";
 
$xplod = explode(' ', $raw);
 
print_r($xplod);
 
$string = "$xplod[5]-$xplod[1]-$xplod[2] $xplod[3]";
 
echo "<br />$string";
 
$date = date("Y-m-d H:i:s", strtotime($string));
 
echo "<br />$date";
 
 
if(msql_query("INSERT INTO test VALUES('$date')"))
echo "Inserted successfully!";
else
echo "Failed .. please try again!";
 
?>

Twitter and other API’s return these kind of string Sun Mar 23 06:39:16 +0000 2008
which we store into a variable. using PHP standard function explode we separate the elements based on space.

Video Tutorial: Format Date and Insert Into Database Table: PHP


[youtube https://www.youtube.com/watch?v=SceCb09fwSo]

YouTube Link: https://www.youtube.com/watch?v=SceCb09fwSo [Watch the Video In Full Screen.]



Now we use print_r() function to see the structure of the array:

1
2
3
4
5
6
7
8

Array ( 
  [0] => Sun 
  [1] => Mar 
  [2] => 23 
  [3] => 06:39:16 
  [4] => +0000 
  [5] => 2008 
)

Next, by using its index value we arrange the date according to the format that is suitable to be stored into mysql table.

Convert the string to time format using strtotime() php standard function.

Finally, using date() function match the date formats and store it inside another variable which is then used to pass the date to the database.

Here is the SQL Query:

1

INSERT INTO test VALUES('$date')

Display System Date and Time: Java

This Java Video Tutorial shows how to extract and display system date(with time stamp).

Inorder to make this program work, you MUST include or import Date class of util package.

  import java.util.Date;

Video Tutorial: Extract and display System Date and Time: Java


[youtube https://www.youtube.com/watch?v=XwQfh8i81r4]

YouTube Link: https://www.youtube.com/watch?v=XwQfh8i81r4 [Watch the Video In Full Screen.]




We create an object of class Date, and just display its content.

Full Source Code:(SysDate.java)

1
2
3
4
5
6
7
8
9
10
11
12

import java.lang.*;
import java.util.Date;
 
class SysDate
{
public static void main(String args[])
{
Date d1 = new Date();
 
System.out.println(d1);
}
}

Output:
Sun Sep 11 17:33:50 IST 2011