DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > DatePicker control in Windows 8 HTML5 Metro JavaScript Application

DatePicker control in Windows 8 HTML5 Metro JavaScript Application

Dhananjay Kumar user avatar by
Dhananjay Kumar
·
Jan. 29, 12 · Web Dev Zone · Interview
Like (0)
Save
Tweet
8.27K Views

Join the DZone community and get the full member experience.

Join For Free

in this post i will show you, how to work with datepicker control in html metro app. datepicker controls comes as part of winjs.

to use datepicker control very first let us create a blank application

clip_image002

right click and open project in expression blend.

clip_image003

choose date picker from assets and put it below body tag.

clip_image005

you can see in live dom tab that date picker control is made up of different html elements. there are three select tag are being used to create date picker tag.

clip_image007

after dragging date picker control on the dom, you can see html generated as below,

clip_image009

to set the basic properties you need to select div contains date picker control and then click attributes tab in properties window.

clip_image010

after setting value of maxyear and minyear , when you switch to html view , you will notice added attribute in date picker control as below,

clip_image011

you may notice in above html that in head section of the html a winjs function is being called. this function is responsible for processing all the winjs controls. it is very much possible to move this winjs function call from html page to js page as below,

clip_image013

at this point if on running of the application, you should be getting date picker control on the app page. let us move ahead and read the selected value from the date picker control. for that give an id to date picker control div and read it on js file using standard java script function.

clip_image015

after fetching as win control, next you need to attach event handler to this.

clip_image017

next if you want to fetch current date selected in date picker you can fetch as below,

clip_image019

in this way you can display selected date in result div. for your convenience full source code for default.js is given below,

default.js


(function () {
'use strict';
// uncomment the following line to enable first chance exceptions.
// debug.enablefirstchanceexception(true);

winjs.application.onmainwindowactivated = function (e) {

var result = document.getelementbyid("result");
winjs.ui.processall().then(function () {

var datefiltercontrol = document.getelementbyid("datepickerdiv").wincontrol;
datefiltercontrol.addeventlistener("change", function () {
var month = datefiltercontrol.current;
result.innerhtml = month;



});

});
if (e.detail.kind === windows.applicationmodel.activation.activationkind.launch) {
// todo: startup code here
}
}

winjs.application.start();
})();



default.html is as below,

default.html


<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>appbarsample</title>
<!-- winjs references -->
<link rel="stylesheet" href="/winjs/css/ui-dark.css" />
<script src="/winjs/js/base.js"></script>
<script src="/winjs/js/wwaapp.js"></script>
<!-- appbarsample references -->
<link rel="stylesheet" href="/css/default.css" />
<script src="/js/default.js"></script>
<script src="/winjs/js/ui.js" type="text/javascript"></script>
<script src="/winjs/js/controls.js" type="text/javascript"></script>

</head>
<body>
<h1>date picker demo</h1>
<div id="datepickerdiv" data-win-control="winjs.ui.datepicker"
data-win-options="{disabled:false,maxyear:2020,minyear:2001}">
</div>
<div id="result">

</div>
</body>
</html>


i hope this post is useful. thanks for reading

source: http://debugmode.net/2012/01/03/working-with-datepicker-control-in-windows-8-html5-metro-app/


HTML application JavaScript

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Building a 32-Core Raspberry Pi Cluster From Scratch
  • Writing Beautiful, Optimized, and Better .NET Code With NDepend Static Analysis
  • SQL CTE: How to Master It in One Sitting With Easy Examples
  • Understand Source Code — Deep Into the Codebase, Locally and in Production

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo