タス デザイン グループ

Read Article

様々な日付、時刻入力コンポーネントを使う

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.fxos.androidtips06"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="14"
        android:targetSdkVersion="15" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@android:style/Theme.NoTitleBar" >
        <activity
            android:name="com.example.fxos.androidtips06.MainActivity"
            android:label="@string/app_name"
            android:launchMode="singleTask" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/textDateTime"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <Button
        android:id="@+id/buttonInputDate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/top_margin"
        android:onClick="onClick"
        android:text="@string/button_input_date" />

    <Button
        android:id="@+id/buttonInputTime"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/top_margin"
        android:onClick="onClick"
        android:text="@string/button_input_time" />

</LinearLayout>

values/dimens.xml

<resources>

    <dimen name="top_margin">10dp</dimen>

</resources>

values/strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">Input of Date and Time</string>
    <string name="button_input_date">Input Date</string>
    <string name="button_input_time">Input Time</string>

</resources>

MainActivity.java

package com.example.fxos.androidtips06;

import android.app.DatePickerDialog.OnDateSetListener;
import android.app.TimePickerDialog.OnTimeSetListener;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.view.View;
import android.widget.DatePicker;
import android.widget.TextView;
import android.widget.TimePicker;

import java.util.Calendar;

public class MainActivity extends FragmentActivity {

    private TextView mTextDateTime;

    private int mYear;

    private int mMonth;

    private int mDay;

    private int mHour;

    private int mMinute;

    OnDateSetListener mOndateSetListener = new OnDateSetListener() {
        @Override
        public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
            // set input value
            mYear = year;
            mMonth = monthOfYear;
            mDay = dayOfMonth;

            // update text label
            updateDateAndTimeInfo();
        }
    };

    OnTimeSetListener mOnTimeSetListener = new OnTimeSetListener() {

        @Override
        public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
            // set input value
            mHour = hourOfDay;
            mMinute = minute;

            // update text label
            updateDateAndTimeInfo();
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mTextDateTime = (TextView)findViewById(R.id.textDateTime);

        // set current date and time
        initializeValue();

        // set value for text label
        updateDateAndTimeInfo();
    }

    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.buttonInputDate:
                // input date
                showDatePicker();
                break;
            case R.id.buttonInputTime:
                // input time
                showTimePicker();
                break;
        }
    }

    private void initializeValue() {
        // get current date and time
        Calendar calender = Calendar.getInstance();

        mYear = calender.get(Calendar.YEAR);
        mMonth = calender.get(Calendar.MONTH);
        mDay = calender.get(Calendar.DAY_OF_MONTH);
        mHour = calender.get(Calendar.HOUR_OF_DAY);
        mMinute = calender.get(Calendar.MINUTE);
    }

    private void showDatePicker() {
        DatePickerFragment date = new DatePickerFragment();

        // set parameter
        Bundle args = new Bundle();
        args.putInt(DatePickerFragment.ARGS_YEAR, mYear);
        args.putInt(DatePickerFragment.ARGS_MONTH, mMonth);
        args.putInt(DatePickerFragment.ARGS_DAY, mDay);
        date.setArguments(args);

        // if set button pushed callback method will call.
        date.setCallBack(mOndateSetListener);
        date.show(getSupportFragmentManager(), DatePickerFragment.TAG);
    }

    private void showTimePicker() {
        TimePickerFragment time = new TimePickerFragment();

        // set parameter
        Bundle args = new Bundle();
        args.putInt(TimePickerFragment.ARGS_HOUR, mHour);
        args.putInt(TimePickerFragment.ARGS_MINUTE, mMinute);
        time.setArguments(args);

        // if set button pushed callback method will call.
        time.setCallBack(mOnTimeSetListener);
        time.show(getSupportFragmentManager(), TimePickerFragment.TAG);
    }

    private void updateDateAndTimeInfo() {
        // set text label
        mTextDateTime.setText(mYear + String.format("-%1$02d", (mMonth + 1))
                + String.format("-%1$02d", mDay) + String.format(" %1$02d", mHour)
                + String.format(":%1$02d", mMinute));
    }

}

DatePickerFragment.java

package com.example.fxos.androidtips06;

import android.app.DatePickerDialog;
import android.app.DatePickerDialog.OnDateSetListener;
import android.app.Dialog;
import android.os.Bundle;
import android.support.v4.app.DialogFragment;

public class DatePickerFragment extends DialogFragment {
    public static final String TAG = DatePickerFragment.class.getSimpleName();

    public static final String ARGS_YEAR = "year";

    public static final String ARGS_MONTH = "month";

    public static final String ARGS_DAY = "day";

    OnDateSetListener onDateSet;

    public DatePickerFragment() {
    }

    public void setCallBack(OnDateSetListener onDate) {
        onDateSet = onDate;
    }

    private int year, month, day;

    @Override
    public void setArguments(Bundle args) {
        super.setArguments(args);
        // set parameter
        year = args.getInt(ARGS_YEAR);
        month = args.getInt(ARGS_MONTH);
        day = args.getInt(ARGS_DAY);
    }

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        return new DatePickerDialog(getActivity(), onDateSet, year, month, day);
    }

}

TimePickerFragment.java

package com.example.fxos.androidtips06;

import android.app.Dialog;
import android.app.TimePickerDialog;
import android.app.TimePickerDialog.OnTimeSetListener;
import android.os.Bundle;
import android.support.v4.app.DialogFragment;

public class TimePickerFragment extends DialogFragment {
    public static final String TAG = TimePickerFragment.class.getSimpleName();

    public static final String ARGS_HOUR = "hour";

    public static final String ARGS_MINUTE = "minute";

    private int hour;

    private int minute;

    OnTimeSetListener onTimeSet;

    public TimePickerFragment() {
    }

    public void setCallBack(OnTimeSetListener onTime) {
        onTimeSet = onTime;
    }

    @Override
    public void setArguments(Bundle args) {
        super.setArguments(args);
        // set parameter
        hour = args.getInt(ARGS_HOUR);
        minute = args.getInt(ARGS_MINUTE);
    }

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        return new TimePickerDialog(getActivity(), onTimeSet, hour, minute, false);
    }

}

manifest.webapp

{
  "name": "date_and_time_input_components",
  "description": "f06_date_and_time_input_components",
  "launch_path": "/index.html",
  "type": "web",
  "icons": {
    "64": "/img/icon/app-icon64.png",
    "128": "/img/icon/app-icon128.png"
  },
  "developer": {
    "name": "TAS Design Group",
    "url": "http://tasdg.co.jp/"
  },
  "default_locale": "ja"
}

FxOS CSS(shared/style/)

JS(/js/thirdparty)

CSS(style/thirdparty)

CSS (style/style.css)

@charset "UTF-8";

html {
  height: 100%;
  font-family: sans-serif;
  font-size: 62.5%;
}

@media only screen and (min-width: 480px) and (max-width: 720px) and (max-aspect-ratio: 1 / 1), only screen and (min-width: 800px) and (max-width: 1280px) and (min-aspect-ratio: 1 / 1) {
  html {
    font-size: 93.75%;
  }
}

@media only screen and (min-width: 640px) and (max-width: 1080px) and (max-aspect-ratio: 1 / 1), only screen and (min-width: 960px) and (max-width: 1920px) and (min-aspect-ratio: 1 / 1) {
  html {
    font-size: 125%;
  }
}

body {
  padding: 0;
  margin: 0;
  height: 100%;
  display: block;
  overflow: hidden;
}

.calendarArea {
  text-align: center;
  padding: 1rem 0;
}

.calendarArea x-calendar {
  margin-bottom: 0.5rem;
}

input[type="time"] {
  background: url("input_areas/images/ui/shadow.png") repeat-x scroll 0 0 white;
  border: 0.1rem solid #CCCCCC;
  border-radius: 0.3rem;
  box-shadow: none;
  box-sizing: border-box;
  display: block;
  font-size: 1.8rem;
  height: 4rem;
  line-height: 4rem;
  padding: 0 1.2rem;
  resize: none;
  width: 100%;
}

.inputArea {
  padding: 0 1rem;
}

index.html

<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
  <meta charset="utf-8">
  <title>input_of_date_and_time</title>
  <link rel="stylesheet" href="style/thirdparty/brick-1.0.1.min.css">
  <link rel="stylesheet" href="shared/style/headers.css">
  <link rel="stylesheet" href="shared/style/input_areas.css">
  <link rel="stylesheet" href="shared/style/lists.css">
  <link rel="stylesheet" href="style/style.css">
  <script src="js/thirdparty/brick-1.0.1.min.js"></script>
  <script src="js/main.js"></script>
</head>
<body>

  <section role="region">
    <header>
      <h1>date_and_time_input_components</h1>
    </header>
    <article>

      <div class="calendarArea">
        <x-calendar id="cal1" controls></x-calendar>
        <div class="inputArea">
          <input id="singledate" type="text" readonly="readonly">
        </div>
      </div>

      <div class="inputArea">
        <p>日付選択</p>
        <input type="date">
        <p>時間選択</p>
        <input type="time">
      </div>

    </article>
  </section>

</body>
</html>

main.js

document.addEventListener('DOMComponentsLoaded', function(){

  var calendar = document.getElementById('cal1');
  var singledate = document.getElementById('singledate');

  //calendar setting
  calendar.chosen = new Date();
  calendar.view = new Date();
  calendar.multiple = false;
  calendar.disableUIToggle = true;
  calendar.span = 1;
  calendar.firstWeekdayNum = 0;
  calendar.labels = {
      prev: "<<",
      next: ">>",
      months: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
      weekdays: ["日", "月", "火", "水", "木", "金", "土"]
  };

  calendar.addEventListener('datetap', function(event){
    singledate.value = event.detail.iso;
  });

});
Return Top