InputDateRange
InputDateRange
概要
InputDateRangeコントロールはInputDateコントロールを拡張し、日付範囲を編集できるように構成します。
機能
サンプル
設定
説明
このサンプルは、InputDateRange コントロールの基本的な使用方法を示します。
ユーザーが選択できるカスタムの日付範囲を指定することも、ドロップダウンで複数月のカレンダーを使用してマウスまたはキーボードで日付範囲を選択することもできます。
ソース
IndexController.cs
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MvcExplorer.Models; namespace MvcExplorer.Controllers { public partial class InputDateRangeController : Controller { public ActionResult Index() { ViewBag.DemoSettings = true; return View(); } } }
Index.cshtml
@{ var today = DateTime.Now.Date; var rangeEnd = today.AddDays(3); } @section Scripts{ <script> // Get predefined date ranges function getPredefinedRanges() { let dt = wijmo.DateTime, now = new Date(); return { // Custom 'Custom Range': null, // Days //'Today': [now, now], //'Yesterday': [dt.addDays(now, -1), dt.addDays(now, -1)], //'Tomorrow': [dt.addDays(now, +1), dt.addDays(now, +1)], // Weeks 'This Week': [dt.weekFirst(now), dt.weekLast(now)], 'Last Week': [dt.weekFirst(dt.addDays(now, -7)), dt.weekLast(dt.addDays(now, -7))], 'Next Week': [dt.weekFirst(dt.addDays(now, +7)), dt.weekLast(dt.addDays(now, +7))], // Months 'This Month': [dt.monthFirst(now), dt.monthLast(now)], 'Last Month': [dt.monthFirst(dt.addMonths(now, -1)), dt.monthLast(dt.addMonths(now, -1))], 'Next Month': [dt.monthFirst(dt.addMonths(now, +1)), dt.monthLast(dt.addMonths(now, +1))], // Years 'This Year': [dt.yearFirst(now), dt.yearLast(now)], 'Last Year': [dt.addYears(dt.yearFirst(now), -1), dt.addYears(dt.yearLast(now), -1)], 'Next Year': [dt.addYears(dt.yearFirst(now), +1), dt.addYears(dt.yearLast(now), +1)], }; } function dateRangeChanged(s) { // Show date ranges let el = document.querySelector('#showRange'); el.innerHTML = wijmo.format('@Html.Raw(Resources.InputDateRange.Index_ShowRange)', s); } function monthCountChanged(sender) { let inputDateRange = wijmo.Control.getControl("#demoControl"); inputDateRange.monthCount = sender.value; } function weeksBeforeChanged(sender) { let inputDateRange = wijmo.Control.getControl("#demoControl"); inputDateRange.weeksBefore = sender.value; } function weeksAfterChanged(sender) { let inputDateRange = wijmo.Control.getControl("#demoControl"); inputDateRange.weeksAfter = sender.value; } function closeOnSelectionChanged(sender) { let inputDateRange = wijmo.Control.getControl("#demoControl"); inputDateRange.closeOnSelection = sender.checked; } </script> } <style> .settings > div { margin-bottom: 0.5em; } .settings label { width: 10em; text-align: right; margin-right: 0.5em; float: left; font-weight: normal; line-height: 2em; } .settings input { height: 1.8em; } .settings .wj-inputnumber { width: 10em; } .wj-inputdate-dropdown > .wj-listbox { max-height: initial; } </style> <p> <div id="demoControl"></div> </p> <p> <span id="showRange"></span> </p> @(Html.C1().InputDateRange().Id("demoControl") .AlwaysShowCalendar(true) .CloseOnSelection(true) .MonthCount(2) .WeeksBefore(0) .WeeksAfter(0) .PredefinedRanges("getPredefinedRanges") .OnClientValueChanged("dateRangeChanged") .OnClientRangeEndChanged("dateRangeChanged") .Value(today) .RangeEnd(rangeEnd) ) @section Settings{ <div class="settings"> <div> <label for="monthCount">Month Count</label> @(Html.C1().InputNumber().Id("monthCount").Min(1).Step(1).Value(2).OnClientValueChanged("monthCountChanged").Width(150)) </div> <div> <label for="weeksBefore">Weeks Before</label> @(Html.C1().InputNumber().Id("weeksBefore").Min(0).Step(1).Value(0).OnClientValueChanged("weeksBeforeChanged").Width(150)) </div> <div> <label for="weeksAfter">Weeks After</label> @(Html.C1().InputNumber().Id("weeksAfter").Min(0).Step(1).Value(0).OnClientValueChanged("weeksAfterChanged").Width(150)) </div> <div> <label for="closeOnSelection">Close On Selection</label> <input type="checkbox" id="closeOnSelection" onchange="closeOnSelectionChanged(this)" checked /> </div> </div> } @section Summary{ <p>@Html.Raw(Resources.InputDateRange.Index_Text0)</p> } @section Description{ <p>@Html.Raw(Resources.InputDateRange.Index_Text1)</p> <p>@Html.Raw(Resources.InputDateRange.Index_Text2)</p> }
マニュアル