Skill/html js css

jquery daterangepicker 사용예

진열사랑 2024. 1. 12. 15:10

// txtDate : 날짜 입력란 <input type="text">
fnInitSingleDatePicker: function(txtDate, strFormat, opts) {
var $objDateInput = $(txtDate);

if(strFormat == null || strFormat == "undefined" || strFormat == "") {
strFormat = "YYYY-MM-DD";
}

// 기본옵션 상속 (우선순위: 호출옵션 > 기본옵션)
var objDateConfig = $.extend({
locale: { format: strFormat },
autoclose: true,
autoApply: true,
showDropdowns: true,
singleDatePicker: true
}, opts);

// Date Picker 생성
$objDateInput.daterangepicker(objDateConfig);
},


-------------
//범위 날짜 입력란 사용예 - datarangepicker
//호출예
fnInitSearchDateRangePicker("#frmIns","#fromYMD", "#toYMD", "#txtRange", "YYYY-MM-DD");
fnInitSearchDateRangePicker: function(objForm, hidStart, hidEnd, txtRange, strFormat, opts) {
var $objStartInput = $(hidStart);
var $objEndInput = $(hidEnd);
var $objRangeInput = $(txtRange);

if(strFormat == null || strFormat == "undefined" || strFormat == "") {
strFormat = "YYYY-MM-DD";
}

// 기본옵션 상속 (우선순위: 호출옵션 > 기본옵션)
var objRangeConfig = $.extend({
locale: {
format: strFormat,
separator: " ~ "
},
autoApply: true,
showDropdowns: true,
linkedCalendars: false,
startDate: $objStartInput.val(),
endDate: $objEndInput.val()
}, opts);

// Date Range Picker 생성
$objRangeInput.daterangepicker(objRangeConfig, function(startDate, endDate) {
$("{0} {1}".format(objForm, hidStart)).prop("value", startDate.format(strFormat));
$("{0} {1}".format(objForm, hidEnd)).prop("value", endDate.format(strFormat));
});
},