html+c:collse,form-components.html

转载于 2021-06-16 22:53:26 发布

· 88 阅读

文章标签：

这篇博客探讨了前端开发中常用的组件和库的使用，包括TagsInput、SelectBox、ColorPicker和DateTimePicker。作者详细展示了如何配置和操作这些组件，特别是涉及到日期和时间选择的部分，如日期范围选择和自定义格式化。博客还提到了日期范围选择器的预设范围和语言设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Falgun - Metro Style Bootstrap Admin Dashboard

/*====TAGS INPUT====*/

$(function () {

$('#tags_1').tagsInput({

width: 'auto'

});

$('#tags_2').tagsInput({

width: 'auto',

onChange: function (elem, elem_tags) {

var languages = ['php', 'ruby', 'javascript'];

$('.tag', elem_tags).each(function () {

if ($(this).text().search(new RegExp('\\b(' + languages.join('|') + ')\\b')) >= 0) $(this).css('background-color', 'yellow');

});

}

});

/*====Select Box====*/

$(function () {

$(".chzn-select").chosen();

$(".chzn-select-deselect").chosen({

allow_single_deselect: true

});

/*====Color Picker====*/

$(function () {

$('.colorpicker').colorpicker({

format: 'hex'

});

$('.pick-color').colorpicker();

});

/*====DATE Time Picker====*/

$(function () {

$('#datetimepicker1').datetimepicker({

language: 'pt-BR'

});

$(function () {

$('#datetimepicker3').datetimepicker({

pickDate: false

});

$(function () {

$('#datetimepicker4').datetimepicker({

pickTime: false

});

/*DATE RANGE PICKER*/

$(function () {

$('#reportrange').daterangepicker({

ranges: {

'Today': ['today', 'today'],

'Yesterday': ['yesterday', 'yesterday'],

'Last 7 Days': [Date.today().add({

days: -6

}), 'today'],

'Last 30 Days': [Date.today().add({

days: -29

}), 'today'],

'This Month': [Date.today().moveToFirstDayOfMonth(), Date.today().moveToLastDayOfMonth()],

'Last Month': [Date.today().moveToFirstDayOfMonth().add({

months: -1

}), Date.today().moveToFirstDayOfMonth().add({

days: -1

})]

opens: 'left',

format: 'MM/dd/yyyy',

separator: ' to ',

startDate: Date.today().add({

days: -29

}),

endDate: Date.today(),

minDate: '01/01/2012',

maxDate: '12/31/2013',

locale: {

applyLabel: 'Submit',

fromLabel: 'From',

toLabel: 'To',

customRangeLabel: 'Custom Range',

daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],

monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],

firstDay: 1

showWeekNumbers: true,

buttonClasses: ['btn-danger']

function (start, end) {

$('#reportrange span').html(start.toString('MMMM d, yyyy') + ' - ' + end.toString('MMMM d, yyyy'));

});

//Set the initial state of the picker label

$('#reportrange span').html(Date.today().add({

days: -29

}).toString('MMMM d, yyyy') + ' - ' + Date.today().toString('MMMM d, yyyy'));

});

$(function () {

$('#reservation').daterangepicker();

});

一键复制

编辑

Web IDE

原始数据

按行查看

历史