jquery 时间选择

You can pass these options as key/value object to $.asDatepicker() method.

default single

<input type="text" id="calendar"> <script> $(document).ready(function(){ $("#calendar").asDatepicker(); }); <script>

range

<input type="text" id="calendar2"> <script> $(document).ready(function(){ $("#calendar2").asDatepicker({mode: 'range'}); }); <script>

multiple

<input type="text" id="calendar3"> <script> $(document).ready(function(){ $("#calendar3").asDatepicker({mode: 'multiple', calendars: '4'}); }); <script>

Data attributes

Any option of the asDatepicker can also be set via data-attributes.

Such as:

<input type="text" id="calendar4" data-mode="range" data-range-mode="section" data-selectable-year="2001>2010,2012,2014>2016"> <script> $(document).ready(function(){ $("#calendar4").asDatepicker(); }); <script>

Mobile Single

<input type="text" id="calendar-mobile-single"> <script> $(document).ready(function(){ $('#calendar-mobile-single').asDatepicker({ mobileMode: true }); }); <script> 

Mobile Range

<input type="text" id="calendar-mobile-range"> <script> $(document).ready(function(){ $('#calendar-mobile-range').asDatepicker({ mode: 'range', mobileMode: true }); }); <script> 

Mobile Multiple

<input type="text" id="calendar-mobile-multiple"> <script> $(document).ready(function(){ $('#calendar-mobile-multiple').asDatepicker({ mode: 'multiple', mobileMode: true }); }); <script> 

Keyboard navigation

left arrow ----- highlights previous day

right arrow ----- highlights next day

up arrow ----- highlights same day from the previous week

down arrow ----- highlights same day from the next week

ctrl + left arrow ----- navigates to previous month

ctrl + right arrow ----- navigates to next month

ctrl + up arrow ----- navigates to higher view

ctrl + down arrow ----- navigates to lower view

alt + left arrow ----- focus in previous calendar

alt + right arrow ----- focus in next calendar

enter ----- if in "days" view selects the highlighted day. In other views navigates to a lower view

esc ----- closes the popup

Available options

You can pass these options as key/value object to $.asDatepicker() method.

API

DisplayMode

With default dropdown and inline

$("#calendar-api-displayMode").asDatepicker({displayMode: 'inline'});

show()

$('#calendar-api-show').asDatepicker('show');

Click to show calendar

hide()

$('#calendar-api-show').asDatepicker('hide');

Click to hide calendar

multipleClear()

$('#calendar-api-multipleClear').asDatepicker('multipleClear');

Clear

getWrap()

$.asDatepicker('getWrap');

Returns the wrapper of the calendar.

getInput()

$.asDatepicker('getInput');

Returns the input field.

getDate()

$('#calendar-api-getDate').asDatepicker('getDate');

Returns the currently selected date.

getDate

 

getDate(format)

$('#calendar-api-getDate-format').asDatepicker('getDate', 'yyyy-mm-dd');

Returns the current date, formatted with the pattern given as the argument.

getDate

 

update()

$('#calendar-api-update').asDatepicker();
$('#calendar-api-update').asDatepicker('update', {mode: 'range'});

Sets one or more options for the asDatepicker.

update

转载于:https://www.cnblogs.com/didiaodexiaodao/p/10205976.html