DateTimePicker
DateTimePicker:
DatePickerDemo/Index.cshtml
@Html.Awe().DateTimePicker(new DateTimePickerOpt{ Name = "DateTime1", Value = DateTime.UtcNow})
DateTimePicker with seconds:
DatePickerDemo/Index.cshtml
@Html.Awe().DateTimePicker(new DateTimePickerOpt { Name = "DateTimeSeconds1", Value = DateTime.UtcNow, ShowSeconds = true })
DatePicker:
DatePickerDemo/Index.cshtml
@Html.Awe().DatePicker(new DatePickerOpt{ Name = "Date", Value = new DateTime(2017, 11, 1)})
Date range picker:
DatePickerDemo/Index.cshtml
@Html.Awe().DatePicker(new DatePickerOpt{ Name = "DateRange1", SelectRange = true })
Inline Calendar
Su | Mo | Tu | We | Th | Fr | Sa |
27 | 28 | 29 | 30 | 31 | 1 | 2 |
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
1 | 2 | 3 | 4 | 5 | 6 | 7 |
Su | Mo | Tu | We | Th | Fr | Sa |
27 | 28 | 29 | 30 | 31 | 1 | 2 |
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
1 | 2 | 3 | 4 | 5 | 6 | 7 |
Inline Datepicker and DateRangePicker, the text input can be hidden.
DatePickerDemo/Index.cshtml
@Html.Awe().DatePicker(new DatePickerOpt { Name = "DateInline", InlineCalendar = true })
@Html.Awe().DatePicker(new DatePickerOpt
{
Name = "DateRangeInline",
InlineCalendar = true,
SelectRange = true
})
Number of months, Min, max, default date, clear button
Date:
DatePickerDemo/Index.cshtml
@(Html.Awe().DatePicker(
new DatePickerOpt
{
Name = "Date3",
NumberOfMonths = 2,
MinDate = DateTime.Now.AddDays(1),
MaxDate = DateTime.Now.AddMonths(2),
DefaultDate = DateTime.Now.AddDays(4),
ClearBtn = true,
ShowTodayBar = false
}))
Date range
Date range using 2 datepickers and js to call datepicker api and set the min and max values for the other datepicker on value change.
From:
To:
show code
Disable certain dates, change weekend days color
If you need to disable certain dates, for example holidays, weekends, or just a specific period, you can use the
DayFunc
to set a custom js function where you can set opt.dsb
to disable a date or add an additional css class to opt.cls
.
Date:
show code
Right to left
DatePickerDemo/Index.cshtml
<div class="einput" style="direction: rtl;">
@Html.Awe().DatePicker(new DatePickerOpt { Name = "Date4" })
</div>
Datepicker Api
Datepicker:
DatePicker api can be called to get or set date, or if you just need to parse or format a date.
$('#id').data('api')
- get datepicker apiapi.getDate()
- get datepicker value as Date objectapi.setDate(date)
- set datepicker value with a Date type parameterawem.formatDate(format, val)
- format Date value to string using provided formatawem.parseDate(format, strval)
- parse string value to Date typeawem.toDate(strval)
- parse string value to Date type, using default format used by the datepicker ( the one set in aweUtils.init
| Html.Awe().Init()
)
TimePicker
DatePickerDemo/Index.cshtml
@(Html.Awe().TimePicker(new TimePickerOpt
{
Name = "TimePicker1",
Caption = "time please",
Step = 15,
ClearBtn = true,
Value = DateTime.UtcNow
}))
TimePicker with seconds
DatePickerDemo/Index.cshtml
@(Html.Awe().TimePicker(new TimePickerOpt
{
Name = "TimePickerSeconds",
Caption = "time please",
Step = 15,
ClearBtn = true,
Value = DateTime.UtcNow,
ShowSeconds = true
}))
The timepicker will use 12h am/pm or 24h format depending on the current culture.
Comments