Datetimepicker bootstrap 4 tải xuống

bootstrap-datetimepicker. tối thiểu. js có sẵn trong 28 phiên bản bootstrap-datetimepicker

4. 17. 47

4. 17. 45

4. 17. 44

4. 17. 43

4. 17. 42

4. 17. 37

4. 15. 35

4. 14. 45

4. 14. 30

4. 7. 14

4. 0. 0

3. 1. 4

3. 1. 3

3. 1. 2

3. 1. 1

3. 1. 0

3. 0. 3

3. 0. 2

3. 0. 1

3. 0. 0

2. 1. 30

2. 1. 20

2. 1. 11

2. 1. 5

2. 0. 1

1. 0. 0

0. 0. 11

0. 0. 10

Kích thước tập tin. 1. 3 MBViews Tổng cộng. 236748Cập nhật lần cuối. 12/11/2020 00. 03. 00 UTC Ngày Xuất bản. 14/03/2018 03. 32. 16 UTCTrang web chính thức. Tới trang webGiấy phép. MIT

Tải xuống bản trình diễn

Thêm trong danh mục này

Xem các plugin được đề xuất

TOP 100 Plugin jQuery 2022

Chrome, IE9+, FireFox, Opera, Safari#Bootstrap#bootstrap 4#Bộ chọn thời gian#Bộ chọn ngày

Đây là một thành phần chọn ngày/giờ hữu ích và có khả năng tùy biến cao dành cho khung Bootstrap 4 sử dụng các biểu tượng Font Awesome thay vì Glyphicons của Bootstrap 3. Dựa trên tiện ích chọn ngày/giờ Bootstrap 3 của Eonasdan

Xem thêm

• Plugin jQuery chọn ngày và giờ tốt nhất
• 10 thư viện JavaScript chọn ngày và giờ hàng đầu

Làm thế nào để sử dụng nó

1. Bao gồm jQuery, Font Awesome, Bootstrap 4 và khoảnh khắc cần thiết. js trên trang html

2. Bao gồm các tệp của bộ chọn ngày/giờ Bootstrap 4 trên trang

3. Tạo trường nhập thông thường cho bộ chọn ngày/giờ

4. Gọi hàm trên trường đầu vào và thực hiện

$(function () {
  $('#example').datetimepicker();
});

5. Tất cả các tùy chọn mặc định để tùy chỉnh bộ chọn ngày và giờ (Giống như tiện ích con bộ chọn ngày/giờ Bootstrap 3 của Eonasdan)

// timezone
timeZone: '',

// Date format. See moment.js' docs for valid formats.
format: false,

// Changes the heading of the datepicker when in "days" view.
dayViewHeaderFormat: 'MMMM YYYY',

// Allows for several input formats to be valid. 
extraFormats: false,

// Number of minutes the up/down arrow's will move the minutes value in the time picker
stepping: 1,

// Prevents date/time selections before this date
minDate: false,

// Prevents date/time selections after this date
maxDate: false,

// On show, will set the picker to the current date/time
useCurrent: true,

// Using a Bootstraps collapse to switch between date/time pickers.
collapse: true,

// See moment.js for valid locales.
locale: moment.locale(),

// Sets the picker default date/time. 
defaultDate: false,

// Disables selection of dates in the array, e.g. holidays
disabledDates: false,

// Disables selection of dates NOT in the array, e.g. holidays
enabledDates: false,

// Change the default icons for the pickers functions.
icons: {
  time: 'fa fa-clock-o',
  date: 'fa fa-calendar',
  up: 'fa fa-chevron-up',
  down: 'fa fa-chevron-down',
  previous: 'fa fa-chevron-left',
  next: 'fa fa-chevron-right',
  today: 'fa fa-crosshairs',
  clear: 'fa fa-trash-o',
  close: 'fa fa-times'
},

// custom tooltip text
tooltips: {
  today: 'Go to today',
  clear: 'Clear selection',
  close: 'Close the picker',
  selectMonth: 'Select Month',
  prevMonth: 'Previous Month',
  nextMonth: 'Next Month',
  selectYear: 'Select Year',
  prevYear: 'Previous Year',
  nextYear: 'Next Year',
  selectDecade: 'Select Decade',
  prevDecade: 'Previous Decade',
  nextDecade: 'Next Decade',
  prevCentury: 'Previous Century',
  nextCentury: 'Next Century',
  pickHour: 'Pick Hour',
  incrementHour: 'Increment Hour',
  decrementHour: 'Decrement Hour',
  pickMinute: 'Pick Minute',
  incrementMinute: 'Increment Minute',
  decrementMinute: 'Decrement Minute',
  pickSecond: 'Pick Second',
  incrementSecond: 'Increment Second',
  decrementSecond: 'Decrement Second',
  togglePeriod: 'Toggle Period',
  selectTime: 'Select Time'
},

// Defines if moment should use scrict date parsing when considering a date to be valid
useStrict: false,

// Shows the picker side by side when using the time and date together
sideBySide: false,

// Disables the section of days of the week, e.g. weekends.
daysOfWeekDisabled: [],

// Shows the week of the year to the left of first day of the week
calendarWeeks: false,

// The default view to display when the picker is shown
// Accepts: 'years','months','days'
viewMode: 'days',

// Changes the placement of the icon toolbar
toolbarPlacement: 'default',

// Show the "Today" button in the icon toolbar
showTodayButton: false,

// Show the "Clear" button in the icon toolbar
showClear: false,

// Show the "Close" button in the icon toolbar
showClose: false,

// On picker show, places the widget at the identifier (string) or jQuery object if the element has css position: 'relative'
widgetPositioning: {
  horizontal: 'auto',
  vertical: 'auto'
},

// On picker show, places the widget at the identifier (string) or jQuery object **if** the element has css `position: 'relative'`
widgetParent: null,

// Allow date picker show event to fire even when the associated input element has the `readonly="readonly"`property.
ignoreReadonly: false,

// Will cause the date picker to stay open after selecting a date if no time components are being used
keepOpen: false,

// If `false`, the textbox will not be given focus when the picker is shown.
focusOnShow: true,

// Will display the picker inline without the need of a input field. This will also hide borders and shadows.
inline: false,

// Will cause the date picker to **not** revert or overwrite invalid dates.
keepInvalid: false,

// CSS selector
datepickerInput: '.datepickerinput',

// Debug mode
debug: false,

// If `true`, the picker will show on textbox focus and icon click when used in a button group.
allowInputToggle: false,

// Must be in 24 hour format. Will allow or disallow hour selections (much like `disabledTimeIntervals`) but will affect all days.
disabledTimeIntervals: false,

// Disable/enable hours
disabledHours: false,
enabledHours: false,

// This will change the `viewDate` without changing or setting the selected date.
viewDate: false

5. Các phương thức API (Giống như tiện ích con bộ chọn ngày/giờ của Eonasdan Bootstrap 3)

$('#datetimepicker').data("DateTimePicker").functionName()

// Destroys the widget and removes all attached event listeners
destroy()

// Shows or hides the widget
toggle()

// Shows the widget
show()

// Hides the widget
hide()

// Disables the input element, the component is attached to, by adding a `disabled="true"` attribute to it. If the widget was visible before that call it is hidden.
disable()

// Enables the input element, the component is attached to, by removing `disabled` attribute from it.
enable()

// Clears the datepicker by setting the value to `null`
clear()

// Returns a `moment` variable with the currently set `options.viewDate` option.
viewDate()

// Returns the component's model current date, a moment object or null if not set.
date()

// Returns an array with the currently set disabled dates on the component.
disabledDates()

// Takes an [ string or Date or moment ] of values and disallows the user to select those days. Setting this takes precedence over options.minDate, options.maxDate configuration. Also calling this function removes the configuration of options.enabledDates if such exist.
disabledDates(dates)

// Returns a moment with the options.defaultDate option configuration or false if not set
defaultDate()

// Takes a string, Date, moment, boolean:false. Will set the picker's inital date. If a boolean:false value is passed the options.defaultDate parameter is cleared.
defaultDate(defaultDate)

// Returns a boolean or string with the options.useCurrent option configuration
useCurrent()

// Takes a boolean or string. If a boolean true is passed and the components model moment is not set (either through setDate or through a valid value on the input element the component is attached to) then the first time the user opens the datetimepicker widget the value is initialized to the current moment of the action. If a false boolean is passed then no initialization happens on the input element. You can select the granularity on the initialized moment by passing one of the following strings ('year', 'month', 'day', 'hour', 'minute') in the variable.
useCurrent(boolean or string)

// Returns the currently set moment of the options.minDate or false if not set
minDate()

// Takes a minDate string, Date, moment, boolean:false parameter and disallows the user to select a moment that is before that moment. If a boolean:false value is passed the options.minDate parameter is cleared and there is no restriction to the miminum moment the user can select.
minDate(minDate)

// Returns the currently set moment of the options.maxDate or false if not set
maxDate()

// Takes a maxDate string, Date, moment, boolean:false parameter and disallows the user to select a moment that is after that moment. If a boolean:false value is passed options.maxDate is cleared and there is no restriction to the maximum moment the user can select.
maxDate(maxDate)

// Returns an array with the options.daysOfWeekDisabled configuration setting of the component.
daysOfWeekDisabled()

// Takes an [ Number:0 to 6 ] and disallow the user to select weekdays that exist in this array. This has lower priority over the options.minDate, options.maxDate, options.disabledDates and options.enabledDates configuration settings.
daysOfWeekDisabled(daysOfWeek)

// Returns the components current options object. Note that the changing the values of the returned object does not change the components actual configuration. Use options(options) to set the components options massively or the other methods for setting config options individually.
options()

// Takes an object variable with option key:value properties and configures the component. Use this to update multiple options on the component.
options([options])

// Returns the component's options.format string
format()

// Takes a moment.js format string and sets the components options.format. This is used for displaying and also for parsing input strings either from the input element the component is attached to or the date() function. The parameter can also be a boolean:false in which case the format is set to the locale's L LT.
format(format)

// Returns a boolean or array with the options.extraFormats option configuration
extraFormats()

// Takes an array of valid input moment format options.
extraFormats(formats)

// Returns the currently set locale of the options.locale
locale()

// Takes a string of any valid moment locale e.g. de for German.
locale(newLocale)

// Returns a number with the options.stepping option configuration
stepping()

// Takes a number. This be the amount the up/down arrows move the minute value with a time picker.
stepping(number)

// Returns a boolean of the options.sideBySide.
ideBySide()

// Takes a boolean. If sideBySide is true and the time picker is used, both components will display side by side instead of collapsing.
sideBySide(sideBySide)

// Returns a boolean with the options.collapse option configuration
collapse()

// Takes a boolean. If set to false the picker will display similar to sideBySide except vertical.
collapse(collapse)

// Returns an Ojbect of options.icons
icons()

// Takes an Ojbect of strings.
icons(icons)

// Returns a boolean of the options.useStrict
useStrict()

// Takes a boolean. If useStrict is true, momentjs parsing rules will be stricter when determining if a date is valid or not.
useStrict(useStrict)

// Returns the currently set options.widgetPositioning object containing two keys horizontal and vertical
widgetPositioning()

// Takes an object parameter that can contain two keys vertical and horizontal each having a value of 'auto', 'top', 'bottom' for vertical and 'auto', 'left', 'right' for horizontal which defines where the dropdown with the widget will appear relative to the input element the component is attached to.

// 'auto' is the default value for both horizontal and vertical keys and it tries to automatically place the dropdown in a position that is visible to the user. Usually you should not override those options unless you have a special need in your layout.
widgetPositioning(positioningObject)

// Returns a string of the options.viewMode.
viewMode()

// Takes a string. Valid values are 'days', 'months', 'years' and 'decades'
viewMode(newViewMode)

// Returns a boolean with the current options.calendarWeeks option configuration
calendarWeeks()

// Takes a boolean variable to set if the week numbers will appear to the left on the days view
calendarWeeks(boolean)

// Returns a boolean variable with the currently set options.showClear option.
showClear()

// Takes a boolean variable to set if the clear date button will appear on the widget
showClear(boolean)

// Returns a boolean variable with the currently set options.showTodayButton option.
showTodayButton()

// Takes a boolean variable to set if the Today button will appear on the widget
showTodayButton(boolean)

// Returns a string variable with the currently set options.toolbarplacement option.
toolbarplacement()

// Takes a string value. Valid values are 'default', 'top' and 'bottom'.

// Changes the placement of the toolbar where the today, clear, component switch icon are located.
toolbarplacement(string)

// Returns a string variable with the currently set options.dayViewHeaderFormat option.
dayViewHeaderFormat()

// Takes a string value.
// Used to customize the header of the day view.
dayViewHeaderFormat(string)

// Returns a string variable with the currently set options.keyBinds option.
keyBinds()

// Takes an object value.
// Allows for several keyBinding functions to be specified for ease of access or accessibility. See the options page for defaults.
keyBinds(object)

// Returns a boolean variable with the currently set options.inline option.
inline()

// Takes a boolean value.
// Used to customize the header of the day view.
inline(boolean)

// Returns a boolean variable with the currently set options.ignoreReadonly option.
ignoreReadonly()

// Takes a boolean value.
// Set this to true to allow the picker to be used even if the input field is readonly. This will not bypass the disabled property
ignoreReadonly(boolean)

// Returns a boolean variable with the currently set options.showClose option.
showClose()

// Takes a boolean value.
// If true, an icon will be displayed on the toolbar that will hide the picker
showClose(boolean)

// Returns a string variable with the currently set options.keepInvalid option.
keepInvalid()

// Takes a boolean value.
// If true, invalid dates will not be reverted to a previous selection or changed.
keepInvalid(boolean)

// Returns a boolean variable with the currently set options.allowInputToggle option.
allowInputToggle()

// Takes a boolean value.
// If true, the picker will show on textbox focus and icon click when used in a button group
allowInputToggle(boolean)

// Returns a boolean variable with the currently set options.focusOnShow option.
focusOnShow()

// Takes a boolean value.
// If false, the textbox will not be given focus when the picker is shown
focusOnShow(boolean)

// Returns an array variable with the currently set options.disabledTimeIntervals option.
disabledTimeIntervals()

// Takes a array value.
// The array must be in the following format [moment(),moment()]
disabledTimeIntervals(array)

// Returns an array variable with the currently set options.en/disabledHours option.
disabledHours()

// Takes a array value.
// Must be in 24 hour format. Will allow or disallow hour selections (much like disabledTimeIntervals) but will affect all days.
// Like en/disabledDates, these options are mutually exclusive and will reset one of the options back to false.
disabledHours(boolean)

// Returns a moment variable with the currently set options.viewDate option.
viewDate()

// Takes a string, moment or Date value.
// This will change the viewDate without changing or setting the selected date.
viewDate(viewDate)

// Returns a function with the currently set options.parseInputDate
parseInputDate()

// Takes a function
// Allows custom input formatting For example: the user can enter 'yesterday' or '30 days ago'.
parseInputDate(function)

// Returns an Ojbect of options.tooltips
tooltips()

// Takes an Ojbect of strings.
tooltips(tooltips)

6. Trình xử lý sự kiện (Giống như tiện ích bộ chọn ngày/giờ Bootstrap 3 của Eonasdan)

$('#example').datetimepicker()
.on( "dp.hide", function() {
  // Fired when the widget is hidden.
})
.on( "dp.show", function() {
  // Fired when the widget is shown.
})
.on( "dp.change", function() {
  // Fired when the date is changed.
})
.on( "dp.error", function() {
  // Fired when a selected date fails to pass validation.
})
.on( "dp.update", function() {
  // Fired (in most cases) when the viewDate changes. E.g. Next and Previous buttons, selecting a year.
})

Nhật ký thay đổi

2020-11-12

• Vá lỗi

Plugin jQuery tuyệt vời này được phát triển bởi pingcheng. Để biết thêm Cách sử dụng nâng cao, vui lòng kiểm tra trang demo hoặc truy cập trang web chính thức

Bootstrap 4 có Datetimepicker không?

Làm cách nào để sử dụng Datetimepicker trong Bootstrap 4?

Làm cách nào để thêm bộ chọn ngày giờ trong Bootstrap?

Phiên bản mới nhất của Datetimepicker là gì?