Skip to content

Commit

Permalink
calendar pro: update display value
Browse files Browse the repository at this point in the history
  • Loading branch information
@pvictor
pvictor committed Feb 4, 2025
1 parent 3195ea7 commit 030f87c
Show file tree
Hide file tree
Showing 4 changed files with 123 additions and 22 deletions.
7 changes: 7 additions & 0 deletions R/calendar-pro-input.R
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,13 @@ calendarProInput <- function(inputId,
)
config$input <- input
config$settings$selection$time <- time
if (!is.null(time)) {
if (is.null(timeValue)) {
timeValue <- format(value, format = "%H:%M")
} else {
value <- as.POSIXct(paste(format(value, format = "%Y-%m-%d"), timeValue))
}
}
config$settings$selected$time <- timeValue
if (!is.null(value))
config$settings$selected$dates <- list1(format(value, format = "%Y-%m-%d"))
Expand Down
83 changes: 69 additions & 14 deletions inst/examples/calendar-pro/value/app.R
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,59 +31,110 @@ ui <- fluidPage(

calendarProInput(
inputId = "cal5",
label = "Month selection:",
placeholder = "Select a month",
type = "month",
label = "Multiple date selection:",
type = "multiple",
placeholder = "Select multiple date ",
width = "100%",
parseValue = parseValue
),
verbatimTextOutput("res5"),

calendarProInput(
inputId = "cal7",
label = "Range date selection:",
type = "range",
placeholder = "Select range of dates ",
width = "100%",
parseValue = parseValue
),
verbatimTextOutput("res7"),

calendarProInput(
inputId = "cal9",
label = "Month selection:",
placeholder = "Select a month",
type = "month",
width = "100%",
parseValue = parseValue,
format = "%Y-%m"
),
verbatimTextOutput("res9"),

calendarProInput(
inputId = "cal11",
label = "Year selection:",
placeholder = "Select a year",
# settings = list(selection = list(month = FALSE)),
type = "year",
width = "100%",
parseValue = parseValue
),
verbatimTextOutput("res7")
verbatimTextOutput("res11")
),
column(
width = 6,

calendarProInput(
inputId = "cal2",
label = "Multiple date selection:",
type = "multiple",
placeholder = "Select multiple date ",
label = "Datetime selection:",
placeholder = "Select date and time",
time = 12,
width = "100%",
parseValue = parseValue
parseValue = parseValue,
format = "%Y-%m-%d %H:%M"
),
verbatimTextOutput("res2"),

calendarProInput(
inputId = "cal4",
label = "Datetime selection:",
label = "Datetime selection (with default as POSIXct):",
value = as.POSIXct(paste(Sys.Date(), "9:00")),
time = 24,
placeholder = "Select date and time",
time = 12,
width = "100%",
parseValue = parseValue
parseValue = parseValue,
format = "%Y-%m-%d %H:%M"
),
verbatimTextOutput("res4"),

calendarProInput(
inputId = "cal6",
label = "Datetime selection (with default):",
label = "Datetime selection (with timeValue default):",
value = Sys.Date(),
time = 24,
timeValue = "10:00",
placeholder = "Select date and time",
width = "100%",
parseValue = parseValue,
format = "YYYY-MM-DD HH:mm"
format = "%Y-%m-%d %H:%M"
),
verbatimTextOutput("res6"),

calendarProInput(
inputId = "cal8",
label = "Datetime multiple selection (with default):",
value = as.POSIXct(paste(Sys.Date(), "9:00")),
time = 24,
type = "multiple",
placeholder = "Select date and time",
width = "100%",
parseValue = parseValue,
format = "%Y-%m-%d %H:%M"
),
verbatimTextOutput("res8"),

calendarProInput(
inputId = "cal10",
label = "Datetime range selection (with default):",
value = as.POSIXct(paste(Sys.Date(), "9:00")),
time = 24,
type = "range",
placeholder = "Select date and time",
width = "100%",
parseValue = parseValue,
format = "%Y-%m-%d %H:%M"
),
verbatimTextOutput("res6")
verbatimTextOutput("res10")
)
)
)
Expand All @@ -97,6 +148,10 @@ server <- function(input, output, session) {
output$res5 <- renderPrint(str(input$cal5))
output$res6 <- renderPrint(str(input$cal6))
output$res7 <- renderPrint(str(input$cal7))
output$res8 <- renderPrint(str(input$cal8))
output$res9 <- renderPrint(str(input$cal9))
output$res10 <- renderPrint(str(input$cal10))
output$res11 <- renderPrint(str(input$cal11))

}

Expand Down
2 changes: 1 addition & 1 deletion inst/packer/calendar-pro.js
View file

Large diffs are not rendered by default.

53 changes: 46 additions & 7 deletions srcjs/inputs/vanilla-calendar-pro.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,29 @@ import "vanilla-calendar-pro/build/vanilla-calendar.min.css";
import dayjs from "dayjs";


function changeToInputMonth(fmt) {
return function(self, event) {
if (!self.HTMLInputElement) return;
console.log(self);
if (self.selectedMonth[0]) {
var date = self.selectedYear[0] + "-" + self.selectedMonth[0] + "-01";
self.HTMLInputElement.value = dayjs(date).format(fmt);
//self.hide();
} else {
self.HTMLInputElement.value = "";
}
};
}

function changeToInputSingle(fmt) {
return function(e, self) {
if (!self.HTMLInputElement) return;
if (self.selectedDates[0]) {
self.HTMLInputElement.value = dayjs(self.selectedDates[0]).format(fmt);
var date = self.selectedDates[0];
if (self?.selectedTime) {
date = date + " " + self.selectedTime;
}
self.HTMLInputElement.value = dayjs(date).format(fmt);
//self.hide();
} else {
self.HTMLInputElement.value = "";
Expand All @@ -23,10 +41,19 @@ function changeToInputRange(fmt) {
if (!self.HTMLInputElement) return;
if (self.selectedDates[1]) {
self.selectedDates.sort((a, b) => +new Date(a) - +new Date(b));
var fmtdates = self.selectedDates.map(x => dayjs(x).format(fmt));
var fmtdates = self.selectedDates.map(x => {
if (self?.selectedTime) {
x = x + " " + self.selectedTime;
}
return dayjs(x).format(fmt);
});
self.HTMLInputElement.value = `${fmtdates[0]} \u2014 ${fmtdates[fmtdates.length - 1]}`;
} else if (self.selectedDates[0]) {
self.HTMLInputElement.value = dayjs(self.selectedDates[0]).format(fmt);
var date = self.selectedDates[0];
if (self?.selectedTime) {
date = date + " " + self.selectedTime;
}
self.HTMLInputElement.value = dayjs(date).format(fmt);
} else {
self.HTMLInputElement.value = "";
}
Expand All @@ -37,7 +64,12 @@ function changeToInputMultiple(fmt) {
return function(e, self) {
if (!self.HTMLInputElement) return;
if (self.selectedDates[0]) {
var fmtdates = self.selectedDates.map(x => dayjs(x).format(fmt));
var fmtdates = self.selectedDates.map(x => {
if (self?.selectedTime) {
x = x + " " + self.selectedTime;
}
return dayjs(x).format(fmt);
});
self.HTMLInputElement.value = fmtdates.join(" \u2014 ");
//self.hide();
} else {
Expand Down Expand Up @@ -128,9 +160,14 @@ $.extend(calendarProBinding, {
el,
pick(
self,
"selectedDates", "selectedHolidays", "selectedMonth",
"selectedYear", "selectedHours", "selectedMinutes",
"selectedTime", "selectedKeeping"
"selectedDates",
"selectedHolidays",
"selectedMonth",
"selectedYear",
"selectedHours",
"selectedMinutes",
"selectedTime",
"selectedKeeping"
)
);
$(el).trigger("change");
Expand All @@ -143,6 +180,8 @@ $.extend(calendarProBinding, {
} else {
config.actions.changeToInput = changeToInputMultiple(config.format);
}
} else if (config.type == "month") {
config.actions.onClickMonth = changeToInputMonth(config.format);
} else {
config.actions.changeToInput = changeToInputSingle(config.format);
}
Expand Down

0 comments on commit 030f87c

Please sign in to comment.