如何在html contenteditable元素中使用datepicker

时间:2016-09-30 10:09:01

标签: jquery html datepicker contenteditable

您好我在contenteditable元素中使用datepicker插件。要在contenteditable div中选择datepicker值。 HTML:

var name = $("#name").val(); 
var db = $("#db").is(":checked"); //return true or false

脚本:

<div class="sample">
  <input name="date" class="datepicker-input"  />
  <div class="date1" contentEditable="true">test</div>
</div>

datepicker值没有分配给div。如果我使用类型hidden to datepicker是datepiker日历没有显示。

3 个答案:

答案 0 :(得分:1)

$(function(){
    
    $('#thedate').datepicker({
        dateFormat: 'dd-mm-yy',
         onSelect: function(dateText) {
   		$('#dateContainer').text(dateText);
        console.log(dateText);
        }
        
    });
    
});
<link href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
Shown Date : <div id="dateContainer" type="button" > currentData </div>
<input id="thedate" type="text" /><br />
<input id="thesubmit" type="button" value="Submit" />

好吧,下面是带有可编辑文本框的jquery date picker

JS摆弄日期选择器: - http://jsfiddle.net/vikash2402/8w8v9/1989/

JS摆弄日期选择器和div: - http://jsfiddle.net/vikash2402/8w8v9/1990/

希望这会对您有所帮助:)

答案 1 :(得分:1)

使用jQuery $(".date1").text(valuew);

或使用DOM

document.getElementsByClassName("date1").textContent=valuew;

答案 2 :(得分:0)

您活动的选择器 -

library(shiny)
library(highcharter)
library(lubridate)
library(dplyr)
df <- read.table(header = TRUE,sep = ",",text = "date,Campylobacteriosis Enteritis,Chlamydia,Gonorrhea,Salmonellosis,Shigellosis
1/2/2014,1,10,2,1,0
                 1/3/2014,2,3,0,1,0
                 1/4/2014,0,2,0,0,0
                 1/5/2014,0,1,0,0,0
                 1/6/2014,3,7,0,0,0
                 1/7/2014,1,18,4,0,0
                 1/8/2014,1,14,5,0,0
                 1/9/2014,0,12,5,0,0
                 1/10/2014,0,26,3,0,0
                 1/11/2014,0,5,2,0,0
                 1/12/2014,1,1,0,1,0
                 1/13/2014,0,9,4,0,0
                 1/14/2014,0,21,4,0,0
                 1/15/2014,1,22,6,0,0
                 1/16/2014,0,18,4,0,0
                 1/17/2014,0,14,3,0,0
                 1/18/2014,0,6,1,0,0
                 1/19/2014,0,2,2,0,0
                 1/20/2014,1,4,4,1,0
                 1/21/2014,0,4,3,0,0
                 1/22/2014,1,13,2,0,0
                 1/23/2014,0,12,4,0,0
                 1/24/2014,0,17,7,0,0
                 1/25/2014,0,4,0,2,0
                 1/26/2014,0,5,1,0,0
                 1/27/2014,0,16,2,0,0
                 1/28/2014,2,26,3,0,0
                 1/29/2014,0,14,4,0,0
                 1/30/2014,0,12,0,0,0
                 1/31/2014,0,8,5,0,0
                 2/1/2014,0,5,1,1,0
                 2/2/2014,1,1,0,0,0
                 2/3/2014,2,15,5,1,0
                 2/4/2014,0,19,4,1,1
                 2/5/2014,1,11,3,1,0
                 2/6/2014,0,17,6,0,0
                 2/7/2014,0,19,6,0,0
                 2/8/2014,0,4,0,0,0
                 2/9/2014,0,0,1,1,0
                 2/10/2014,1,17,5,0,0
                 2/11/2014,0,13,6,0,0
                 2/12/2014,1,18,5,0,0
                 2/13/2014,1,6,1,0,1
                 2/14/2014,1,6,6,0,0
                 2/15/2014,0,2,2,0,0
                 2/16/2014,1,2,0,1,0
                 2/17/2014,0,3,1,1,0
                 2/18/2014,0,12,2,0,0
                 2/19/2014,0,9,1,0,0
                 2/20/2014,0,9,2,0,0
                 2/21/2014,0,15,4,0,0")

df$date <- df$date %>% as.character() %>% as.Date(format = "%m/%d/%Y")

# Define UI for application that draws a histogram
ui <- fluidPage(

   # Application title
   titlePanel("Highchart Grouping"), 

   # Sidebar with a slider input for number of bins 
   sidebarLayout(
      sidebarPanel(
         radioButtons("intervall",
                     "Aggregation level:",
                     choices = c("Day" = "day","Month" = "month","Year" = "year"))
      ),

      # Show a plot of the generated distribution
      mainPanel(
         highchartOutput("Plot")
      )
   )
)

# Define server logic required to draw a histogram
server <- function(input, output) {
   dta <- reactive({
     df %>% 
       group_by(date = floor_date(date,input$intervall)) %>% 
       summarise_if(is.numeric,sum)
   })


   output$Plot <- renderHighchart({
     salmonella_all_subset <- dta()
     highchart(type = "stock") %>% 
       hc_title(text = paste("Number of cases by diseases over time")) %>% 
       hc_subtitle(text = "This dataset was produced from disease data from 2014 to 2017") %>% 
       hc_add_series_times_values(salmonella_all_subset$date,
                                  salmonella_all_subset$Gonorrhea,
                                  name = "Gonorrhea") %>% 
       hc_add_series_times_values(salmonella_all_subset$date,
                                  salmonella_all_subset$Shigellosis,
                                  name = "Shigellosis") %>% 
       hc_add_series_times_values(salmonella_all_subset$date,
                                  salmonella_all_subset$Campylobacteriosis.Enteritis,
                                  name = "Campylobacteriosis Enteritis") %>% 
       hc_add_series_times_values(salmonella_all_subset$date,
                                  salmonella_all_subset$Chlamydia,
                                  name = "Chlamydia") %>% 
       hc_add_series_times_values(salmonella_all_subset$date,
                                  salmonella_all_subset$Salmonellosis,
                                  name = "Salmonellosis") %>% 

       hc_add_theme(hc_theme_sandsignika())
   })
}

# Run the application 
shinyApp(ui = ui, server = server)

引用一个不存在的类......你不应该使用:

$('.date').click(function() {

你也不应该用.html()而不是.val()来设置你的DIV值吗?