Как использовать персидский Джалали Каландар в формате js в блестящем приложении

Question

Я хочу использовать персидский календарь Джалали в своем блестящем приложении, чтобы выбрать дату. Я не нашел такой возможности в функции dateInput () для отображения календаря jalali, более того, я не нашел подобного вопроса для решения этой проблемы. Но я нашел файл персидского календаря jalali, предоставленный в javascrip (js) с его CSS форматами здесь . Я пытался включить эти файлы в мой код, но они не работали. Сначала я нахожу код функции dateInput () и меняю его имя на функцию MYdateInput следующим образом:

 library(htmltools)

MYdateInput <- function(inputId, label, value = NULL, min = NULL, max = NULL,
                      format = "yyyy-mm-dd", startview = "day", weekstart = 0,
                      language = "en", width = NULL, autoclose = TRUE,
                      datesdisabled = NULL, daysofweekdisabled = NULL) {

  value <- dateYMD(value, "value")
  min <- dateYMD(min, "min")
  max <- dateYMD(max, "max")
  datesdisabled <- dateYMD(datesdisabled, "datesdisabled")

  value <- restoreInput(id = inputId, default = value)

  tags$div(id = inputId,
           class = "shiny-date-input form-group shiny-input-container",
           style = if (!is.null(width)) paste0("width: ", validateCssUnit(width), ";"),

           shinyInputLabel(inputId, label),
           tags$input(type = "text",
                      class = "form-control",
                      `data-date-language` = language,
                      `data-date-week-start` = weekstart,
                      `data-date-format` = format,
                      `data-date-start-view` = startview,
                      `data-min-date` = min,
                      `data-max-date` = max,
                      `data-initial-date` = value,
                      `data-date-autoclose` = if (autoclose) "true" else "false",
                      `data-date-dates-disabled` =
                        # Ensure NULL is not sent as `{}` but as 'null'
                        jsonlite::toJSON(datesdisabled, null = 'null'),
                      `data-date-days-of-week-disabled` =
                        jsonlite::toJSON(daysofweekdisabled, null = 'null')
           ),
           datePickerDependency
  )
}



# Make user-supplied dates are either NULL or can be coerced
# to a yyyy-mm-dd formatted string. If a date is specified, this
# function returns a string for consistency across locales.
# Also, `as.Date()` is used to coerce strings to date objects
# so that strings like "2016-08-9" are expanded to "2016-08-09"
dateYMD <- function(date = NULL, argName = "value") {
  if (!length(date)) return(NULL)
  if (length(date) > 1) warning("Expected `", argName, "` to be of length 1.")
  tryCatch(date <- format(as.Date(date), "%Y-%m-%d"),
           error = function(e) {
             warning(
               "Couldn't coerce the `", argName,
               "` argument to a date string with format yyyy-mm-dd",
               call. = FALSE
             )
           }
  )
  date
}


shinyInputLabel <- function(inputId, label = NULL) {
  tags$label(
    label,
    class = "control-label",
    class = if (is.null(label)) "shiny-label-null",
    `for` = inputId
  )
}

, затем я изменил код datePickerDependency следующим образом, чтобы определить зависимые файлы js и css из календарь:

datePickerDependency <- htmlDependency(name = "date-picker", version = "0.1",

                   src = getwd(),
                   script = c("www/bootstrap-datepicker.fa.js","www/bootstrap-datepicker.fa.min.js",
                              "www/bootstrap-datepicker.js","www/bootstrap-datepicker.min.js"),
                   stylesheet = c("www/bootstrap-datepicker.css", "www/bootstrap-datepicker.min.css")
    ) 

, затем я запускаю блестящий код следующим образом:

    library(shiny)


ui<-fluidPage(
   MYdateInput(inputId="date", "Select data")

)
server<-function(input,output){
 #getDate <- input$sDate     
  #getDate 
}
shinyApp(ui=ui,server=server)

, но после запуска приложения каландар Джалали не может быть отображен. На самом деле я хочу, чтобы календарь jalali отображался вместо грузинского календаря, используя код, подобный следующему коду, но включенный в файл календаря js jalali, доступный по ссылке выше. Заранее спасибо за любую помощь.

ui<-fluidPage(
    dateRangeInput(inputId="date", "Select data")
  )
server<-function(input,output){

}
shinyApp(ui=ui,server=server)

Answer 1

На самом деле я новичок в блестящей, но после многих попыток с кодами я нашел решение. Однако возникает простой новый вопрос, на который нужно ответить (см. Конец моего решения, чтобы прокомментировать мой новый вопрос).

Решение: сначала я суммировал и изменил демо. html код по ссылке выше:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <!-- <title>jQuery UI Datepicker with Twitter Bootstrap Theme</title > -->
        <link rel="stylesheet" href="bootstrap.min.css" />
        <link rel="stylesheet" href="bootstrap-datepicker.min.css" />
        <style>body{margin:2em}</style>
    </head>

    <body>
      <!--  <h1>jQuery UI Datepicker with Twitter Bootstrap Theme</h1> -->
       <!--  <form> -->

            <div class="control-group">
                <label class="control-label" for="datepicker1">Datepicker with bootstrap icon button</label>
                <div class="controls">
                    <div class="input-append">
                        <input id="datepicker1" class="input-small" type="text">
                        <button id="datepicker1btn" class="btn" type="button"><i class="icon-calendar"></i></button>
                    </div>
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="datepicker4">Datepicker with change month/year (jQuery option)</label>
                <div class="controls">
                    <input type="text" id="datepicker4" />
                </div>
            </div>

       <!-- </form> -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script src="bootstrap-datepicker.min.js"></script>
        <script src="bootstrap-datepicker.fa.min.js"></script>
        <script>
            $(document).ready(function() {

                $("#datepicker1").datepicker();
                $("#datepicker1btn").click(function(event) {
                    event.preventDefault();
                    $("#datepicker1").focus();
                });
                $("#datepicker4").datepicker({
                    changeMonth: true,
                    changeYear: true
                });
            });
        </script>
    </body>
</html>

, затем я передал все файлы, включая css, png, js а также демо. html в www folder. В bootstrap .min. css файле Я изменяю адрес файлов png (при поиске с помощью png вы найдете два адреса png), оставляя имя файлов без относительного адрес. Затем я создал файл app.R (этот файл должен находиться за пределами www) следующим образом:

library(shiny)
ui<-fluidPage(
    sidebarLayout(
     sidebarPanel(
       htmlTemplate("www/demo.html"),
       dateInput("date","select date"),
       #Enter Submit to write info to file
       actionButton(inputId = "submit", "Submit", icon = NULL, width = NULL)

     ),

     mainPanel(
       # Application title
       titlePanel("Read Date"),

       column(2,
              verbatimTextOutput("dateText1"),
              verbatimTextOutput("dateText2"))

       )
     )
   )


server<-function(input,output){

  observeEvent(input$submit,{

     output$dateText1  <- renderText({
      paste("Georgian date is", as.character(input$date))
    })

    output$dateText2 <- renderText({
      paste("Jalali date is", as.character(input$datepicker1))
    })

  })
}  

shinyApp(ui=ui,server=server)

После запуска приложения вы можете увидеть два варианта выбора для календаря Jalali, а также текстовое поле общего календаря (Конец решение).

Но теперь у меня появился новый вопрос: я хочу, чтобы выбранные даты отображались на главной панели после нажатия кнопки «Отправить» внизу. Как видите, он хорошо работает для грузинского календаря, но в случае с календарем Джалали он не работает. Я хочу, чтобы при изменении даты Джалали выбранная дата отображалась на главной панели. Назначаю любую помощь ...

Answer 2

Вы можете использовать эту javascript функцию Кредит этому вкладчику

function hijricalendar(adjust,year,month,day){
var today = new Date(year,month-1,day);

/*correction by Kamel to be reviewed*/
if (year <1970) {adjust=-3};

/*************************************/

if(adjust) {
adjustmili = 1000*60*60*24*adjust;
todaymili = today.getTime()+adjustmili;
today = new Date(todaymili);
}
day = today.getDate();
month = today.getMonth();
year = today.getFullYear();
m = month+1;
y = year;
if(m<3) {
y -= 1;
m += 12;
}

a = Math.floor(y/100.);
b = 2-a+Math.floor(a/4.);
if(y<1583) b = 0;
if(y==1582) {
if(m>10) b = -10;
if(m==10) {
b = 0;
if(day>4) b = -10;
}
}

jd = Math.floor(365.25*(y+4716))+Math.floor(30.6001*(m+1))+day+b-1524;

b = 0;
if(jd>2299160){
a = Math.floor((jd-1867216.25)/36524.25);
b = 1+a-Math.floor(a/4.);
}
bb = jd+b+1524;
cc = Math.floor((bb-122.1)/365.25);
dd = Math.floor(365.25*cc);
ee = Math.floor((bb-dd)/30.6001);
day =(bb-dd)-Math.floor(30.6001*ee);
month = ee-1;
if(ee>13) {
cc += 1;
month = ee-13;
}
year = cc-4716; 
wd = gmod(jd+1,7)+1;
iyear = 10631./30.;
epochastro = 1948084;
epochcivil = 1948085;

shift1 = 8.01/60.;
z = jd-epochastro;
cyc = Math.floor(z/10631.);
z = z-10631*cyc;
j = Math.floor((z-shift1)/iyear);
iy = 30*cyc+j;
z = z-Math.floor(j*iyear+shift1);
im = Math.floor((z+28.5001)/29.5);
if(im==13) im = 12;
id = z-Math.floor(29.5001*im-29);

var myRes = new Array(8);

myRes[0] = day; //calculated day (CE)
myRes[1] = month-1; //calculated month (CE)
myRes[2] = year; //calculated year (CE)
myRes[3] = jd-1; //julian day number
myRes[4] = wd-1; //weekday number
myRes[5] = id; //islamic date
myRes[6] = im-1; //islamic month
myRes[7] = iy; //islamic year

return myRes;
}