6

这是我的日期选择器，它在 Firefox 中不起作用

  <div class="input-append datepicker">
              <?php if($_REQUEST["date"]){ ?>
                <input id="filter-date" size="16" type="date" value="<?php echo $_REQUEST["date"];?>"/>
              <?php } else { ?>
                <input id="filter-date" size="16" type="date" value="<?php echo date('Y-m-d');?>"/>
              <?php } ?>
    </div>

$('.datepicker').datepicker();

我能做些什么来解决这个问题？

更新

以下是 Firefox 的呈现方式。

在此处输入图像描述

另一个更新

以下是我正在使用的脚本：

<script type="text/javascript" src=".../lodash.min.js"></script>
<script type="text/javascript" src=".../jquery.min.js"></script>
<script type="text/javascript" src=".../jquery-1.9.1.js"></script>
<script type="text/javascript" src=".../jquery-ui.js"></script>
<script type="text/javascript" src=".../jquery.dataTables.min.js"></script>
<script type="text/javascript" src=".../DT_bootstrap.js"></script>
<script type="text/javascript" src=".../datatables.responsive.js"></script>
<script type="text/javascript" src=".../dom-bootstrap.js"></script>
4

11 回答 11

12

Paulie，你应该使用这个脚本：

<script type="text/javascript" src="Include/JS/jquery-ui-min.js"></script>

和

<script type="text/javascript" >
     $(document).ready(function () {
            $("#filter-date").datepicker({
                dateFormat: 'yy/mm/dd'
            });
        });
</script>

您需要将 datepicker 应用于 type 的输入控件text。因此，请尝试在您的代码中进行这些更改。

<div class="input-append datepicker">
  <?php if($_REQUEST["date"]){ ?>
  <input id="filter-date" size="16" type="text"
                    value="<?php echo $_REQUEST["date"];?>"/>
  <?php } else { ?>
  <input id="filter-date" size="16" type="text" 
                    value="<?php echo date('Y-m-d');?>"/>
  <?php } ?>
</div>
于 2013-10-30T09:24:42.167 回答
3

我从您在页面中包含正确的 jQuery 和 jQuery UI 的事实开始。

现在您正在使用此选择器附加日期选择器：

$('.datepicker').datepicker();

你必须给你的元素datepicker类，例如：

<?php if($_REQUEST["date"]){ ?>
    <input id="filter-date" class="datepicker" size="16" type="text" value="<?php echo $_REQUEST["date"];?>"/>
<?php } else { ?>
    <input id="filter-date" class="datepicker" size="16" type="text" value="<?php echo date('Y-m-d');?>"/>
<?php } ?>

或将您的日期选择器与 id 选择器绑定，例如：

$('#filter-date').datepicker();

PS：我建议你不要使用type="date"，否则 Chrome 会两次渲染日期选择器（它的行为和插件）。

于 2013-10-22T07:31:54.413 回答
3

您使用了错误的选择器，它应该是$('#divDatePicker').datepicker();，直接到输入而不是父级。

于 2013-11-01T02:25:33.980 回答
2

尝试使用这样的东西：

$(document).ready(function() {
    <?php if($_REQUEST["date"]){ ?>
    $('.datepicker').datepicker( "setDate", "<?php echo date('Y-m-d', strtotime($_REQUEST['date']));?>" );
    <?php }?>
});
于 2013-10-29T10:12:47.647 回答
2

试试看嘛

$('.datepicker input').datepicker();

如果你想使用 jquery 写

<input id="filter-date" size="16" type="text" />

如果你使用 type="date" 它会造成混乱。

这样这个目标输入在 div

演示

另请参阅此 stackoverflow 帖子 Chrome type="date" 和 jquery ui 日期选择器冲突

于 2013-10-31T06:03:20.850 回答
2

您必须将'.datepicker'类名分配给输入

于 2013-10-31T12:04:30.417 回答
1

如果您使用bootstrap日期选择器而不是 -

  <div id="divDatePicker" class="input-append datepicker">
              <?php if($_REQUEST["date"]){ ?>
                <input id="filter-date" size="16" type="date" value="<?php echo $_REQUEST["date"];?>"/>
              <?php } else { ?>
                <input id="filter-date" size="16" type="date" value="<?php echo date('Y-m-d');?>"/>
              <?php } ?>
    </div>

您应该尝试将 date-picker 与 element 绑定ID：

$('#divDatePicker').datepicker();

并在脚本块中编写您的代码：

<script type="text/javascript">
    $(document).ready(function() {
        $('.datepicker').datepicker();
    });
</script>

或者

<script type="text/javascript">
      $(document).ready(function() {
          $('#divDatePicker').datepicker();
      });
</script>

尝试这个

于 2013-10-26T13:30:52.700 回答
0

I have faced similar issue in some of the browsers because of the z-index which is assigned to the date picker ui. I used a work around like shown below which did the job.

    $(".datepicker input").datepicker({ dateFormat: "yy-mm-dd",beforeShow: function() {
        setTimeout(function(){ $('.ui-datepicker').css('z-index', 99999999);},0);
    }});

But before that, please use inspect element in mozilla to make sure the element with class .ui-datepicker is added in the dom somewhere.

于 2013-11-01T17:01:20.060 回答
0

在 Mozilla 的情况下，您可以使用 jQuery 日期选择器：使用 $.browser.mozilla 检查浏览器，但它在 jQuery>1.9 中不起作用，因此您必须使用 jQuery Migration，如下所示：

     <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>//jQuery migration
    <script>
        if ($.browser.mozilla)
    {
        if ($('.datepicker')[0].type != 'date') $('.datepicker').datepicker();
        $(function () {
            $(".datepicker").datepicker({
                changeMonth: true,
                changeYear: true,
                yearRange: "1900:2015",
                dateFormat: "yy-mm-dd",
                defaultDate: '1900-01-01'
            });
        });
    }

</script>
于 2015-02-06T05:19:05.380 回答
0

这是 HTML 的较短版本：

<div class="input-append datepicker">
    <input id="filter-date" size="16" type="date" value="<?php echo (isset($_REQUEST["date"]) ? $_REQUEST["date"] : date('Y-m-d')) ?>"/>
</div>

调用日期选择器（地址是<input>，而不是包装<div>）

$(document).ready(function() {
    $('#filter-date').datepicker();
});
于 2013-10-26T09:34:23.653 回答
0

这是使用 html5 回答 Firefox 中 Datepicker 问题的完整和最终答案：

<script src="//cdn.jsdelivr.net/webshim/1.14.5/polyfiller.js"></script>
<script>
webshims.setOptions('forms-ext', {types: 'date'});
webshims.polyfill('forms forms-ext');
</script>
<input type="date" name="event_date" required/>

于 2015-09-17T12:16:12.410 回答