ホームページ ウェブフロントエンド jsチュートリアル Lauiui フロントエンド フレームワークの日付コントロールの使用方法

Lauiui フロントエンド フレームワークの日付コントロールの使用方法

Jan 11, 2018 pm 05:06 PM
layui コントロール 日付

この記事では主に、layui フロントエンド フレームワークでの日付コントロールの使用方法を詳しく紹介します。興味のある方は参考にしていただければ幸いです。

この記事の例では、layui-date コントロールの実装コードを参考までに共有します。具体的な内容は次のとおりです


<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>日期</title>
  <link rel="stylesheet" href="layui/css/layui.css">
 </head>
 <body>
  <blockquote class="layui-elem-quote">目前Layui中的日期组件还是layDate 1.1的改良版,它后续将会进行一次重写。</blockquote>
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
   <legend>顺便列举几个常用例子</legend>
  </fieldset>
  <p class="layui-form-pane" style="margin-top: 15px;">
   <p class="layui-form-item">
  <label class="layui-form-label">范围选择</label>
  <p class="layui-input-inline">
   <input class="layui-input" placeholder="开始日" id="LAY_demorange_s">
  </p>
  <p class="layui-input-inline">
   <input class="layui-input" placeholder="截止日" id="LAY_demorange_e">
  </p>
  </p>
  </p>

  <script src="layui/layui.js"></script>
  <script>
layui.use(&#39;laydate&#39;, function(){

 var laydate = layui.laydate;

 var start = {
 min: laydate.now()
 ,max: &#39;2099-06-16 23:59:59&#39;
 ,istoday: false
 ,choose: function(datas){
  end.min = datas; //开始日选好后,重置结束日的最小日期
  end.start = datas //将结束日的初始值设定为开始日
 }
 };

 var end = {
 min: laydate.now()
 ,max: &#39;2099-06-16 23:59:59&#39;
 ,istoday: false
 ,choose: function(datas){
  start.max = datas; //结束日选好后,重置开始日的最大日期
 }
 };

 document.getElementById(&#39;LAY_demorange_s&#39;).onclick = function(){
 start.elem = this;
 laydate(start);
 }
 document.getElementById(&#39;LAY_demorange_e&#39;).onclick = function(){
 end.elem = this
 laydate(end);
 }

});
</script>

 </body>
</html>
ログイン後にコピー

レンダリング:

関連する推奨事項:

jquery で値を取得します。 easyuiの日付コントロールの実装方法

JavaScriptで実装した日付コントロール

シンプルな横型JavaScriptの日付コントロール_時刻と日付

以上がLauiui フロントエンド フレームワークの日付コントロールの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Weiboで過去のWeiboを日付で検索する方法_Weiboで過去のWeiboを日付で検索する方法 Weiboで過去のWeiboを日付で検索する方法_Weiboで過去のWeiboを日付で検索する方法 Mar 30, 2024 pm 07:26 PM

1. まずモバイル Web ブラウザを開き、Weibo Web バージョンを検索し、入力後に左上隅にあるアバター ボタンをクリックします。 2. 次に、右上隅の「設定」をクリックします。 3. 設定でバージョン切り替えオプションをクリックします。 4. 次に、バージョン スイッチでカラー バージョン オプションを選択します。 5. 「検索」をクリックして検索ページに入ります。 6. キーワードを入力した後、「Find People」をクリックします。 7. 検索完了インターフェイスが表示されたら、「フィルター」をクリックします。 8. 最後に、リリース時刻列に特定の日付を入力し、[フィルター] をクリックします。

PPT配布資料を印刷するときに自動的に表示される日付を削除する方法 PPT配布資料を印刷するときに自動的に表示される日付を削除する方法 Mar 26, 2024 pm 08:16 PM

1. まず最初に私が使用した方法について話します。おそらく誰もがそれを使用しているかもしれません。まず、[表示]——]備考テンプレート[を開きます。 2. 開封後、実際に日付が確認できる場所。 3. 最初にそれを選択して削除します。 4. 削除後、[マスタービューを閉じる]をクリックします。 5. もう一度印刷プレビューを開くと、日付がまだ残っていることがわかります。 6. 実際、この日付はここでは削除されていません。 [配布資料マスター]にあるはずです。下の写真を見てください。 7. 日付を見つけたら削除します。 8. プレビューを開いて確認すると、日付が表示されなくなります。注: 実際、この方法も非常に覚えやすいです。印刷された配布資料は配布資料なので、[配布資料マスター] を探す必要があります。

Lauiuiログインページでジャンプを設定する方法 Lauiuiログインページでジャンプを設定する方法 Apr 04, 2024 am 03:12 AM

Layui ログインページジャンプ設定手順: ジャンプコードの追加: ログインフォーム送信ボタンクリックイベントに判定を追加し、ログイン成功後、window.location.href 経由で指定ページにジャンプします。フォーム構成を変更します。lay-filter="login" のフォーム要素に非表示の入力フィールドを追加します。名前は「redirect」、値はターゲット ページ アドレスです。

Lauiuiでフォームデータを取得する方法 Lauiuiでフォームデータを取得する方法 Apr 04, 2024 am 03:39 AM

layui は、フォームのすべてのフィールド データを直接取得する、単一のフォーム要素の値を取得する、formAPI.getVal() メソッドを使用して指定されたフィールド値を取得する、フォーム データをシリアル化するなど、フォーム データを取得するためのさまざまなメソッドを提供します。これを AJAX リクエスト パラメータとして使用し、フォーム送信イベントをリッスンしてデータを取得します。

Excelで日付をポンド記号に変更する方法 Excelで日付をポンド記号に変更する方法 Mar 20, 2024 am 11:46 AM

Excel ソフトには非常に強力なデータ処理機能が備わっています。私たちはさまざまなデータを処理するために Excel ソフトをよく使用します。Excel のセルに日付を入力すると、Excel の日付がポンド記号に変わってしまうことがあります。データを正常に表示するにはどうすればよいですか?以下の解決策を見てみましょう。 1. まず、下の図に示すように、列 AB の間の列幅の線にマウスを置き、ダブルクリックして列幅を調整します。 2. 列の幅を広げると、セルに日付の代わりに数値が表示されますが、これは間違いです。次の図に示すように、セルの書式を確認する必要があります。 3. 以下の図に示すように、[ホーム] タブの [数値] オプションをクリックし、ドロップダウン メニューの [その他の数値形式] をクリックします。

Lauiuiでデータを転送する方法 Lauiuiでデータを転送する方法 Apr 26, 2024 am 03:39 AM

layui を使用してデータを送信する方法は次のとおりです。 Ajax を使用する: リクエスト オブジェクトを作成し、リクエスト パラメーター (URL、メソッド、データ) を設定し、レスポンスを処理します。組み込みメソッドを使用する: $.post、$.get、$.postJSON、$.getJSON などの組み込みメソッドを使用してデータ転送を簡素化します。

Lauiui が自己適応を実現する方法 Lauiui が自己適応を実現する方法 Apr 26, 2024 am 03:00 AM

アダプティブ レイアウトは、layui フレームワークのレスポンシブ レイアウト機能を使用して実現できます。手順には以下が含まれます:layui フレームワークを参照する。アダプティブ レイアウト コンテナを定義し、layui-container クラスを設定します。レスポンシブ ブレークポイント (xs/sm/md/lg) を使用して、特定のブレークポイントの下にある要素を非表示にします。グリッド システム (layui-col-) を使用して要素の幅を指定します。オフセット (layui-offset-) によって間隔を作成します。応答性の高いユーティリティ (layui-invisible/show/block/inline) を使用して、要素の可視性とその表示方法を制御します。

lauiとvueの違いは何ですか? lauiとvueの違いは何ですか? Apr 04, 2024 am 03:54 AM

Lauiui と Vue の違いは主に機能と懸念事項に反映されます。 Layui は UI 要素の迅速な開発に重点を置き、ページ構築を簡素化するプレハブ コンポーネントを提供します。Vue は、データ バインディング、コンポーネント開発、および状態管理に重点を置いたフルスタック フレームワークで、複雑なアプリケーションの構築により適しています。 Layui は学習が簡単で、ページをすばやく作成するのに適しています。Vue は学習曲線が急ですが、スケーラブルで保守が簡単なアプリケーションの構築に役立ちます。プロジェクトのニーズと開発者のスキル レベルに応じて、適切なフレームワークを選択できます。

See all articles