jqueryテキストボックスが時間形式を変更します

jQuery は、JavaScript 言語をベースにしたオープン ソース フレームワークで、JavaScript コードを処理するためのシンプルかつ効率的かつ時間を節約する方法を提供します。 Web 開発のプロセスでは、テキスト ボックスはよく使用されるフォーム要素の 1 つであり、通常はテキスト ボックスに入力される時刻形式を制限したり、変換したりする必要があります。この記事では、jQueryを使ってテキストボックスの時刻形式を変更する方法を紹介します。

まず、HTML ページにテキスト ボックス要素を追加し、それに id 属性を割り当てます。

<input type="text" id="mydate" />

次に、テキスト ボックスの時刻形式を処理するコードを JavaScript ファイルに記述します。 jQuery の val() 関数を使用してテキスト ボックスの値を取得し、JavaScript の Date オブジェクトを使用して形式を変換できます。具体的なコードは次のとおりです。

$(document).ready(function() {
  // 监听文本框改变事件
  $('#mydate').on('change', function() {
    // 获取文本框中的值
    var dateString = $(this).val();
    // 将字符串转换为Date对象
    var dateObj = new Date(dateString);
    // 转换为指定格式的字符串
    var newDateString = dateObj.getFullYear() + '-' + (dateObj.getMonth()+1) + '-' + dateObj.getDate();
    // 在文本框中显示转换后的值
    $(this).val(newDateString);
  });
});

コードの具体的な処理を説明します。まず、jQuery の ready() 関数を使用して、ページの読み込みが完了した後に何をするかを指定します。次に、テキスト ボックスの変更イベントをリッスンします。これは、ユーザーがテキスト ボックスに値を入力または変更したときにトリガーされるイベントです。イベント処理関数では、val() 関数を使用してテキスト ボックスの値を取得し、それを Date オブジェクトに変換します。ここで注意する必要があるのは、Date オブジェクトのパラメータ形式が正しい日付形式である必要があるということです。そうでない場合、変換は失敗します。次に、必要な時刻形式に従って Date オブジェクトを文字列に変換し、val() 関数を使用してテキスト ボックスに割り当て直します。

実際の開発では、さまざまな時間形式や要件に遭遇する可能性があります。現時点では、上記のコードを拡張し、さらに多くの形式変換関数を追加できます。以下は時刻形式を「年-月-日 時:分:秒」の形式に変換する例です。

$(document).ready(function() {
  $('#mydate').on('change', function() {
    var dateString = $(this).val();
    var dateObj = new Date(dateString);
    var year = dateObj.getFullYear();
    var month = addLeadingZero(dateObj.getMonth()+1);
    var date = addLeadingZero(dateObj.getDate());
    var hours = addLeadingZero(dateObj.getHours());
    var minutes = addLeadingZero(dateObj.getMinutes());
    var seconds = addLeadingZero(dateObj.getSeconds());
    var newDateString = year + '-' + month + '-' + date + ' ' + hours + ':' + minutes + ':' + seconds;
    $(this).val(newDateString);
  });
  
  // 日期、月份、小时、分钟、秒钟前面加0
  function addLeadingZero(num) {
    return (num < 10) ? '0' + num : num;
  }
});

上記のコードでは、数値を 2 桁にフォーマットするために使用される addLeadingZero という関数を定義します。この関数を使用すると、月、日付、時、分、秒の書式を設定できます。

要約すると、jQuery を使用してテキスト ボックス内の時刻形式を変更するには、次の手順が必要です。まずテキスト ボックスの変更イベントをリッスンし、次にテキスト ボックス内の値を取得して日付に変換します。オブジェクトを取得し、Date オブジェクトを変換します。これを必要な形式の文字列に変換し、最後に文字列値をテキスト ボックスに割り当てます。より複雑な形式変換を実行する場合は、JavaScript の組み込み Date オブジェクトといくつかのカスタム関数を使用して変換を完了できます。

以上がjqueryテキストボックスが時間形式を変更しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。