ただし、これでは、フォーカル取得可能ですので、カーソルが表示されます。
そこで、これを防止する手段を実装してみました。
以下のサイトのように結構皆さん苦労しているようです。
http://qiita.com/kokoe/items/9ff51d1eb990d8238e83
http://oshiete.goo.ne.jp/qa/257482.html
1、readonly属性の場合
下の画像のように04の前に入力カーソル（入力位置表示）が表示されます。
ソースコードは以下のようにした場合です。
【HTML5】
<input class="datepic" type="text" id="from_date" readonly>
【CSS】
.datepic {
border:1px solid white ; /* 枠線の装飾 */
border-radius: 3px; /* CSS3 */
-moz-border-radius: 3px; /* Firefox */
-webkit-border-radius: 3px; /* Safari,Chrome */
height:20px;
vertical-align:middle;
text-align:center;
cursor:auto;
}
２、disabled属性の場合
下のコードのように記述することで、入力カーソルが表示されなくなります（下画像）。
ソースコードは以下のようにした場合です。
赤字のように、readonlyをdisabledに変更します。
CSSで背景(background-color)と文字色(color)を設定します。
【HTML5】
<input class="datepic" type="text" id="from_date" disabled>
【CSS】
.datepic {
border:1px solid white ; /* 枠線の装飾 */
border-radius: 3px; /* CSS3 */
-moz-border-radius: 3px; /* Firefox */
-webkit-border-radius: 3px; /* Safari,Chrome */
height:20px;
vertical-align:middle;
text-align:center;
color:white;
background-color:black;
cursor:auto;
}
