モバイル端末に適したJavaScript日時ピッカー_JavaScriptスキル

これは、モバイル デバイスの WEB アプリケーションに適した日付と時刻のピッカーです。デスクトップ バージョンの日付ピッカーでは、通常、jQuery UI の datepicker プラグインを使用しますが、モバイル バージョンの日付ピッカーでは、次のことができます。 Mobile が提供する mobiscroll.js プラグインは、使いやすい日付と時刻の選択操作インターフェイスを提供し、設定と使用が簡単です。

HTML
まず、関連するプラグインとスタイル ファイルをロードします。プラグインは jQuery と jQuery.mobile に基づいているため、最初にこれら 2 つのライブラリ ファイルをロードし、次に mobiscroll.js プラグインと関連 CSS ファイルをロードする必要があります。 。

<script src="js/jquery.min.js"></script> 
<script src="js/jquery.mobile-1.3.0.min.js"></script> 
<script src="js/mobiscroll.js" type="text/javascript"></script> 
<link href="css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" /> 

次に、本文に入力ボックスを配置します。これは通常のテキスト入力ボックスです。マウスで入力ボックスをクリックしてカーソルを取得すると、mobiscroll がトリガーされて日付ピッカーがポップアップします。

<input id="date" name="date" /> 

JavaScript
mobiscroll には、ポップアップ パネルの表示方法、最大日付、最小日付、日付形式、終了年などの定義を含む、設定可能な多くのオプションが用意されています。また、中国語のボタンや説明の設定など、プラグインをローカライズすることもできます。呼び出しも非常に簡単です。サンプルコードは次のとおりです:

$(function(){ 
 var opt = { 
 preset: 'date', //日期 
 theme: 'sense-ui', //皮肤样式 
 display: 'modal', //显示方式 
 mode: 'scroller', //日期选择模式 
 dateFormat: 'yy-mm-dd', // 日期格式 
 setText: '确定', //确认按钮名称 
 cancelText: '取消',//取消按钮名籍我 
 dateOrder: 'yymmdd', //面板中日期排列格式 
 dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字 
 hourText: '时',minuteText: "分",ampmText:"上午/下午", 
 endYear:2020 //结束年份 
 }; 
 $("#date").mobiscroll().date(opt); 
}); 

時間のみを選択する場合は、次のように記述できます:

$("#time").mobiscroll().time(opt); 

パネルに日付と時刻を表示したい場合は、これを呼び出します:

$("#datetime").mobiscroll().datetime(opt); 

ソースコードのダウンロード: モバイル端末に適した Javascript 日時ピッカー

モバイル端末に適したシンプルでエレガントな JavaScript 日付と時刻ピッカーが作成されました。気に入っていただければ幸いです。