显示的多个日历或选择的值未正确显示 [英] Multiple Calendars Displayed or Value Selected not displaying correctly

问题描述

好，我使用的是 jQuery Mobile Framework ，并添加了实验日期选择器，但我遇到两个结果。按照页面上的说明，这是我到目前为止。

代码努力＃1：

  $（document）.ready（function（）{
 $（'。hasDatepicker'）hide（）; 
 
 $（'＃date-每个（function（）{
 $（this）.focus（function（）{
 $（this）.next（）。show（'fast'）; 
））; 
 
 $（this）.blur（function（）{
 $（this）.next（）。hide（'fast'）; 
}）; 
}）; 
}）; 
  

现在，这显示了一个日历（我想要的），但是在日期选择上，日期保持不变（今天是日期），而不是选择的日期。

代码努力＃2：

 code $ $（function（）{
 $（'。hasDatepicker'）。hide（）; 
 
 $（'＃date of the birth' （）{
 $（'。hasDatepicker'）。show（'fast'）; 
}）; 
 
 $（'＃生日期） （function（）{
 $（'。hasDatepicker'）。hide（'fast'）; 
}）; 
}）; 
  

现在，这显示了多个日历（5个确切地）堆叠在彼此之间，如果我选择它按预期工作的日期。但是我只想要一个日历显示。

我想结合两个代码的努力来获得所需的结果，但没有什么真的似乎正在运行。

这里是HTML

 < div data-role =fieldcontain> ; 
< label for =生日>出生日期< / label> 
< input type =datename =date-of-birthid =date of of birth/> 
< / div> 
  

type =date是如何你调用日期选择器

任何提示？

其他堆栈链接可能会淡出

• 链接1


• 链接2

更新：

这可能是问题，但仍然没有找到解决方案。

我使用多页面布局选项，对于每个页面，它创建一个附加的日期选择器，但是它显示它们堆叠在一起，功能不正常

解决方案

我得到它的工作。我问过这个问题： jQuery Mobile - >覆盖jQuery UI Datepicker - >布局已损坏

这是实验性的，但它是有效的。你不应该使用这个

  $（'。hasDatepicker'）。show（'fast'）; 
  

您应该为一个站点上的每个日期戳添加唯一的 id 然后写：

$（'＃uniqueId'）。show（'fast'）;

我在datepicker的JavaScript文件中添加了ID。

Ok I'm using the jQuery Mobile Framework and adding the Experimental Date Picker but I encounter two results. Following the instructions on the page, this is what I have so far.

Code Efforts #1:

$(document).ready(function() {        
    $('.hasDatepicker').hide();

    $('#date-of-birth').each(function() {     
        $(this).focus(function() {
            $(this).next().show('fast');
        });

        $(this).blur(function() {               
           $(this).next().hide('fast');
        });
    });
});

Now this shows the one calendar (as I would like) but on date selection the date stays the same (it's todays date) and not the date selected.

Code Efforts #2:

$(function() {
    $('.hasDatepicker').hide();

    $('#date-of-birth').focus(function() {
        $('.hasDatepicker').show('fast');
    });

    $('#date-of-birth').blur(function() {
        $('.hasDatepicker').hide('fast');
    });
});

Now this show multiple calendars (5 to be exact) stacked on top of one another and also if I select the date it works as expected. But I only want one calendar to display.

I would like to combine the two code efforts to get the desired results but nothing really seems to be working.

Here is the HTML

<div data-role="fieldcontain">
    <label for="date-of-birth">Date of Birth</label>
    <input type="date" name="date-of-birth" id="date-of-birth" />                
</div>

The type="date" is how you call the date picker

Any tips?

Other Stack Links that might shed some light

• Link 1
• Link 2

UPDATE:

Well this might be the issue but still haven't found a solution.

I using the Multi-page layout option for jQueryMobile, For each page it creates an additional date-picker but it displays them stack on each other and the functionality doesn't work correctly

解决方案

I got it working. I asked this question: jQuery Mobile -> Override jQuery UI Datepicker -> Layout broken

It is experimental, but it works. You should not use this

$('.hasDatepicker').show('fast');

You should add for each datepicker on one site a unique id and then write:

$('#uniqueId').show('fast');

I add the IDs inside of the JavaScript file of the datepicker.

这篇关于显示的多个日历或选择的值未正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！