カテゴリ: jQuery UIのSpinnerで時刻を入力するjQuery UIのDatepickerウィジェットで日付を入力することはできるが、時刻を入力するウィジェットは用意されていない。と思っていたら、jQuery UIのサイトにひっそりとSpinnerで時刻を入力するデモが用意されていた。 jQuery UIのサイトのコードをそのまま載せるのも意味がないので多少アレンジしてシンプルにした。 <!DOCTYPE> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQuery UI Time Spinner</title> <link rel="stylesheet" href="./stylesheets/jquery-ui-1.10.3.custom.min.css" /> <script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="./js/external/globalize.js"></script> <script type="text/javascript" src="./js/jquery-ui-1.10.3.custom.min.js"></script> <script type="text/javascript"> $.widget('ui.timespinner', $.ui.spinner, { options: { step: 60 * 1000, page: 60 }, _parse: function(value) { if(typeof value === 'string') { if(Number(value) == value) { return Number(value); } return +Globalize.parseDate(value); } return value; }, _format: function(value) { return Globalize.format(new Date(value), 't'); } }); $(document).ready(function() { $('#spinner1').timespinner(); }); </script> <style> </style> </head> <body> <label for="spinner1">時刻</label> <input id="spinner1" name="spinner1" value="09:00 AM" /> </body> </html> (2013/05/06)
Copyright© 2004-2018 モバイル開発系(K) All rights reserved.
[Home]
|