토요일과 일요일(및 공휴일)을 비활성화하기 위해 jQuery UI Datepicker를 만들 수 있습니까?
저는 약속 날짜를 선택할 때 데이트 상대를 사용합니다.저는 이미 날짜 범위를 다음 달에만 설정했습니다.그것은 잘 작동합니다.토요일과 일요일은 선택 가능한 시간에서 제외하고 싶습니다.할 수 있을까요?만약 그렇다면, 어떻게?
있습니다.beforeShowDay각 날짜에 대해 호출할 함수를 사용하는 옵션으로, 날짜가 허용되면 true를 반환하고 허용되지 않으면 false를 반환합니다.문서에서:
쇼데이 전에
함수는 날짜를 매개 변수로 사용하며 이 날짜를 선택할 수 있는지 여부를 나타내는 [0]이 true/false와 동일하고 기본 프레젠테이션에 대해 CSS 클래스 이름 또는 "와 1이 동일한 배열을 반환해야 합니다.날짜 선택기에 표시되기 전에 날짜 선택기의 각 요일에 대해 호출됩니다.
날짜 선택기에 일부 국경일을 표시합니다.
$(".selector").datepicker({ beforeShowDay: nationalDays})
natDays = [
[1, 26, 'au'], [2, 6, 'nz'], [3, 17, 'ie'],
[4, 27, 'za'], [5, 25, 'ar'], [6, 6, 'se'],
[7, 4, 'us'], [8, 17, 'id'], [9, 7, 'br'],
[10, 1, 'cn'], [11, 22, 'lb'], [12, 12, 'ke']
];
function nationalDays(date) {
for (i = 0; i < natDays.length; i++) {
if (date.getMonth() == natDays[i][0] - 1
&& date.getDate() == natDays[i][1]) {
return [false, natDays[i][2] + '_day'];
}
}
return [true, ''];
}
주말을 선택할 수 없도록 하는 noWeekends라는 기본 제공 기능이 있습니다.
$(".selector").datepicker({ beforeShowDay: $.datepicker.noWeekends })
둘을 결합하기 위해, 당신은 다음과 같은 것을 할 수 있습니다.nationalDays위에서 기능):
$(".selector").datepicker({ beforeShowDay: noWeekendsOrHolidays})
function noWeekendsOrHolidays(date) {
var noWeekend = $.datepicker.noWeekends(date);
if (noWeekend[0]) {
return nationalDays(date);
} else {
return noWeekend;
}
}
업데이트: jQuery UI 1.8.19에서 beforeShowDay 옵션은 옵션인 세 번째 파레미터, 팝업 도구 팁도 허용합니다.
주말을 표시하지 않으려면 다음과 같이 하십시오.
CSS
th.ui-datepicker-week-end,
td.ui-datepicker-week-end {
display: none;
}
날짜 선택기에는 이 기능이 내장되어 있습니다!
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends
});
http://api.jqueryui.com/datepicker/ #유틸리티-주말 없음
이 답변들은 매우 도움이 되었습니다.감사해요.
아래의 제 기고문에는 여러 날이 거짓으로 반환될 수 있는 배열이 추가되어 있습니다(매주 화요일, 수요일, 목요일 휴무).그리고 구체적인 날짜와 연도, 그리고 주말이 없는 기능들을 함께 묶었습니다.
주말을 쉬려면 닫힌 요일 배열에 [토요일], [일요일]을 추가합니다.
$(document).ready(function(){
$("#datepicker").datepicker({
beforeShowDay: nonWorkingDates,
numberOfMonths: 1,
minDate: '05/01/09',
maxDate: '+2M',
firstDay: 1
});
function nonWorkingDates(date){
var day = date.getDay(), Sunday = 0, Monday = 1, Tuesday = 2, Wednesday = 3, Thursday = 4, Friday = 5, Saturday = 6;
var closedDates = [[7, 29, 2009], [8, 25, 2010]];
var closedDays = [[Monday], [Tuesday]];
for (var i = 0; i < closedDays.length; i++) {
if (day == closedDays[i][0]) {
return [false];
}
}
for (i = 0; i < closedDates.length; i++) {
if (date.getMonth() == closedDates[i][0] - 1 &&
date.getDate() == closedDates[i][1] &&
date.getFullYear() == closedDates[i][2]) {
return [false];
}
}
return [true];
}
});
모두가 좋아하는 해결책은 매우 강렬해 보입니다...개인적으로 저는 다음과 같은 것을 하는 것이 훨씬 더 쉽다고 생각합니다.
var holidays = ["12/24/2012", "12/25/2012", "1/1/2013",
"5/27/2013", "7/4/2013", "9/2/2013", "11/28/2013",
"11/29/2013", "12/24/2013", "12/25/2013"];
$( "#requestShipDate" ).datepicker({
beforeShowDay: function(date){
show = true;
if(date.getDay() == 0 || date.getDay() == 6){show = false;}//No Weekends
for (var i = 0; i < holidays.length; i++) {
if (new Date(holidays[i]).toString() == date.toString()) {show = false;}//No Holidays
}
var display = [show,'',(show)?'':'No Weekends or Holidays'];//With Fancy hover tooltip!
return display;
}
});
이렇게 하면 날짜를 사람이 읽을 수 있습니다.그렇게 다르지는 않습니다. 그냥 이런 식으로 하는 게 더 이해가 됩니다.
noWeekends 함수를 사용하여 주말 선택을 비활성화할 수 있습니다.
$(function() {
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends
});
});
이 버전의 코드는 sql 데이터베이스에서 휴일 날짜를 가져오고 UI 날짜 선택기에서 지정된 날짜를 사용하지 않도록 설정합니다.
$(document).ready(function (){
var holiDays = (function () {
var val = null;
$.ajax({
'async': false,
'global': false,
'url': 'getdate.php',
'success': function (data) {
val = data;
}
});
return val;
})();
var natDays = holiDays.split('');
function nationalDays(date) {
var m = date.getMonth();
var d = date.getDate();
var y = date.getFullYear();
for (var i = 0; i ‘ natDays.length-1; i++) {
var myDate = new Date(natDays[i]);
if ((m == (myDate.getMonth())) && (d == (myDate.getDate())) && (y == (myDate.getFullYear())))
{
return [false];
}
}
return [true];
}
function noWeekendsOrHolidays(date) {
var noWeekend = $.datepicker.noWeekends(date);
if (noWeekend[0]) {
return nationalDays(date);
} else {
return noWeekend;
}
}
$(function() {
$("#shipdate").datepicker({
minDate: 0,
dateFormat: 'DD, d MM, yy',
beforeShowDay: noWeekendsOrHolidays,
showOn: 'button',
buttonImage: 'images/calendar.gif',
buttonImageOnly: true
});
});
});
SQL에서 데이터베이스를 만들고 휴일 날짜를 MM/DD/YYY 형식으로 Varchar로 입력합니다. getdate.php 파일에 아래 내용을 입력합니다.
[php]
$sql="SELECT dates FROM holidaydates";
$result = mysql_query($sql);
$chkdate = $_POST['chkdate'];
$str='';
while($row = mysql_fetch_array($result))
{
$str .=$row[0].'';
}
echo $str;
[/php]
해피 코딩!!!! :-)
$("#selector").datepicker({ beforeShowDay: highlightDays });
...
var dates = [new Date("1/1/2011"), new Date("1/2/2011")];
function highlightDays(date) {
for (var i = 0; i < dates.length; i++) {
if (date - dates[i] == 0) {
return [true,'', 'TOOLTIP'];
}
}
return [false];
}
이 버전에서 월, 일 및 연도는 달력에서 차단할 날짜를 결정합니다.
$(document).ready(function (){
var d = new Date();
var natDays = [[1,1,2009],[1,1,2010],[12,31,2010],[1,19,2009]];
function nationalDays(date) {
var m = date.getMonth();
var d = date.getDate();
var y = date.getFullYear();
for (i = 0; i < natDays.length; i++) {
if ((m == natDays[i][0] - 1) && (d == natDays[i][1]) && (y == natDays[i][2]))
{
return [false];
}
}
return [true];
}
function noWeekendsOrHolidays(date) {
var noWeekend = $.datepicker.noWeekends(date);
if (noWeekend[0]) {
return nationalDays(date);
} else {
return noWeekend;
}
}
$(function() {
$(".datepicker").datepicker({
minDate: new Date(d.getFullYear(), 1 - 1, 1),
maxDate: new Date(d.getFullYear()+1, 11, 31),
hideIfNoPrevNext: true,
beforeShowDay: noWeekendsOrHolidays,
});
});
});
3 에서는 3(bootstrap-datepicker.js)을 합니다.beforeShowDay에서는 다음합니다.
{ enabled: false, classes: "class-name", tooltip: "Holiday!" }
CSS를 반환하기만 됩니다.false날짜를 선택할 수 없도록 설정합니다.
한또, 없다니가 .$.datepicker.noWeekends따라서 다음과 같은 작업을 수행해야 합니다.
var HOLIDAYS = { // Ontario, Canada holidays
2017: {
1: { 1: "New Year's Day"},
2: { 20: "Family Day" },
4: { 17: "Easter Monday" },
5: { 22: "Victoria Day" },
7: { 1: "Canada Day" },
8: { 7: "Civic Holiday" },
9: { 4: "Labour Day" },
10: { 9: "Thanksgiving" },
12: { 25: "Christmas", 26: "Boxing Day"}
}
};
function filterNonWorkingDays(date) {
// Is it a weekend?
if ([ 0, 6 ].indexOf(date.getDay()) >= 0)
return { enabled: false, classes: "weekend" };
// Is it a holiday?
var h = HOLIDAYS;
$.each(
[ date.getYear() + 1900, date.getMonth() + 1, date.getDate() ],
function (i, x) {
h = h[x];
if (typeof h === "undefined")
return false;
}
);
if (h)
return { enabled: false, classes: "holiday", tooltip: h };
// It's a regular work day.
return { enabled: true };
}
$("#datePicker").datepicker({ beforeShowDay: filterNonWorkingDays });
이 작업은 다음과 같습니다.
$( "#datepicker" ).datepicker({
beforeShowDay: function( date ) {
var day = date.getDay();
return [ ( day > 0 && day < 6 ), "" ];
}
});
토요일 일요일 이런 거 할 수 있어요.
$('#orderdate').datepicker({
daysOfWeekDisabled: [0,6]
});
주말을 비활성화하려면 API에 내장된 기능이 있습니다.
$('#data_1 .input-group.date').datepicker({
daysOfWeekDisabled: [0,6],
});
0 = 일요일
6 = 일요일
언급URL : https://stackoverflow.com/questions/501943/can-the-jquery-ui-datepicker-be-made-to-disable-saturdays-and-sundays-and-holid
'source' 카테고리의 다른 글
| Mysql 오류 구분 기호: 줄 구분 기호에 오류가 있습니다. (0) | 2023.08.30 |
|---|---|
| offsetTop 대 jQuery.offset().top (0) | 2023.08.30 |
| ORACLE SQL 날짜 범위 교차점 (0) | 2023.08.30 |
| MySQL 대량 INSERT 또는 UPDATE (0) | 2023.08.30 |
| Express 미들웨어의 req.local 대 res.local 대 res.data 대 req.data 대 app.local (0) | 2023.08.30 |