jQuery随时选择器无法正常工作

时间:2016-02-25 13:44:45

标签: javascript jquery html datepicker timepicker

我的代码中有一个日期选择器和时间选择器,如下所示,但只有datepicker有效。当我点击带有timepicker的字段时,它没有显示下拉框?

    <script type="text/javascript" src="~/assets/js/plugins/pickers/datepicker.js"></script>
    <script type="text/javascript" src="~/assets/js/plugins/pickers/anytime.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function () {
        $(".text").hide();
        $("#r1").click(function () {
            $(".text").show();
        });
        $("#r2").click(function () {
            $(".text").hide();
        });
        $(function () {
            $(".datepicker").datepicker({
                format: 'dd/mm/yyyy'
            });
            $(function () {
                $(".timepicker").anytime({

                })

            });
        });
    });
</script>

提前致谢

1 个答案:

答案 0 :(得分:0)

我已经为Anytime Picker的工作示例集成了代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://www.ama3.com/anytime/anytime.5.1.2.min.js"></script>

<script>
  AnyTime.picker( "field1",
    { format: "%W, %M %D in the Year %z %E", firstDOW: 1 } );
  $("#field2").AnyTime_picker(
    { format: "%H:%i", labelTitle: "Hora",
      labelHour: "Hora", labelMinute: "Minuto" } );
  </script>
<style>
/* anytime.5.1.2.min.css
Copyright 2008-2015 Andrew M. Andrews III.
License: creativecommons.org/licenses/by-nc-sa/3.0/
Any+Time is a trademark of Andrew M. Andrews III */

.AnyTime-pkr *{border:0;font:inherit;font-size:x-small;font-style:normal;font-weight:400;list-style-type:none;margin:0;padding:0;white-space:nowrap;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.AnyTime-win{background-color:#F0F0F1;border:3px solid silver;display:inline-block;font:normal normal normal xx-small/normal sans-serif;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px}.AnyTime-pkr,.AnyTime-pkr *{text-align:center}.AnyTime-pkr .AnyTime-cloak{background-color:#D7D7D7;opacity:.7;position:absolute;filter:alpha(opacity=70)}.AnyTime-pkr .AnyTime-hdr{background-color:#D0D0D1;color:#606062;font-family:Arial,Helvetica,sans-serif;font-size:medium;font-weight:400;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px}.AnyTime-pkr .AnyTime-x-btn{background-color:#FCFCFF;border:1px solid #F99;color:#FF9F9F;cursor:default;float:right;margin:.25em .25em 0 0;width:1.5em;-moz-border-radius:.4em;-webkit-border-radius:.4em;border-radius:.4em}.AnyTime-pkr .AnyTime-btn{background-color:#FCFCFE;border:1px solid #999;color:#606062;cursor:default;font-family:Arial,Helvetica,sans-serif;margin:0 .1em .1em 0;padding:.2em .3em;-moz-border-radius:.1em;-webkit-border-radius:.1em;border-radius:.1em}.AnyTime-pkr .AnyTime-body{margin:0 1em 1em 0}.AnyTime-pkr .AnyTime-date{display:inline-block;margin-left:1em;vertical-align:top}.AnyTime-pkr .AnyTime-lbl{color:#606063;font-family:Arial,Helvetica,sans-serif;font-size:100%;font-weight:400;font-style:normal;margin-top:.8em}.AnyTime-pkr .AnyTime-yrs{width:20em}.AnyTime-pkr .AnyTime-yrs-past-btn,.AnyTime-pkr .AnyTime-yrs-ahead-btn{display:inline-block;width:2.4em}.AnyTime-pkr .AnyTime-yr-prior-btn,.AnyTime-pkr .AnyTime-yr-cur-btn,.AnyTime-pkr .AnyTime-yr-next-btn{display:inline-block;width:4.8em}.AnyTime-pkr .AnyTime-mons{width:20em}.AnyTime-pkr .AnyTime-mons:after{content:"";display:table;clear:both}.AnyTime-pkr .AnyTime-mon-btn{float:left;width:3.2em}.AnyTime-pkr .AnyTime-mon7-btn{clear:left}.AnyTime-pkr .AnyTime-dom-table{background-color:#F0F0F1;border:1px solid #E3E3E4;border-spacing:1px;width:20em}.AnyTime-pkr th.AnyTime-dow{background-color:#C0C0C1;color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:95%;font-weight:400;font-style:normal;padding:.1em .3em}.AnyTime-pkr .AnyTime-dom-btn{text-align:right;padding-right:.5em}.AnyTime-pkr .AnyTime-dom-btn-empty,.AnyTime-pkr .AnyTime-min-ten-btn-empty,.AnyTime-pkr .AnyTime-min-one-btn-empty,.AnyTime-pkr .AnyTime-sec-ten-btn-empty,.AnyTime-pkr .AnyTime-sec-one-btn-empty{background-color:#F3F3F4;border:1px solid #C0C0c1}.AnyTime-pkr .AnyTime-time,.AnyTime-pkr .AnyTime-hrs-am,.AnyTime-pkr .AnyTime-hrs-pm,.AnyTime-pkr .AnyTime-mins-tens,.AnyTime-pkr .AnyTime-mins-ones,.AnyTime-pkr .AnyTime-secs-tens,.AnyTime-pkr .AnyTime-secs-ones{display:inline-block}.AnyTime-pkr .AnyTime-hrs,.AnyTime-pkr .AnyTime-mins,.AnyTime-pkr .AnyTime-secs,.AnyTime-pkr .AnyTime-offs{display:inline-block;margin-left:1em}.AnyTime-pkr .AnyTime-hr-btn{text-align:right;width:3.5em}.AnyTime-pkr .AnyTime-min-ten-btn,.AnyTime-pkr .AnyTime-min-one-btn{width:2em}.AnyTime-pkr .AnyTime-sec-ten-btn,.AnyTime-pkr .AnyTime-sec-one-btn{width:2em}.AnyTime-pkr .AnyTime-off-cur-btn{display:inline-block;overflow:hidden}.AnyTime-pkr .AnyTime-off-select-btn{display:inline-block;vertical-align:top;width:2em}.AnyTime-pkr .AnyTime-yr-selector{position:absolute}.AnyTime-pkr .AnyTime-body-yr-selector{margin:.8em 1em}.AnyTime-pkr .AnyTime-yr-mil,.AnyTime-pkr .AnyTime-yr-cent,.AnyTime-pkr .AnyTime-yr-dec,.AnyTime-pkr .AnyTime-yr-yr,.AnyTime-pkr .AnyTime-yr-era{display:inline-block;vertical-align:top}.AnyTime-pkr .AnyTime-mil-btn,.AnyTime-pkr .AnyTime-cent-btn,.AnyTime-pkr .AnyTime-dec-btn,.AnyTime-pkr .AnyTime-yr-btn{width:2em}.AnyTime-pkr .AnyTime-era-btn{margin-left:1em}.AnyTime-pkr .AnyTime-off-selector{margin:1em 2em;position:absolute}.AnyTime-pkr .AnyTime-body-off-selector{margin:.8em 1em;overflow-x:hidden;overflow-y:auto;white-space:nowrap}.AnyTime-pkr .AnyTime-off-off-btn{text-align:left}.AnyTime-pkr .AnyTime-cur-btn{border:1px solid #333334;background-color:#C0C0C1;color:#FCFCFE;font-weight:700}.AnyTime-pkr .AnyTime-out-btn{background-color:#F0F0F1;border:1px solid #C0C0c1}.AnyTime-pkr .AnyTime-focus-btn{border:1px dashed #000}
</style>
<style>
  #field2 { background-image:url("clock.png");
    background-position:right center; background-repeat:no-repeat;
    border:1px solid #FFC030;color:#3090C0;font-weight:bold}
  #AnyTime--field2 {background-color:#EFEFEF;border:1px solid #CCC}
  #AnyTime--field2 * {font-weight:bold}
  #AnyTime--field2 .AnyTime-btn {background-color:#F9F9FC;
    border:1px solid #CCC;color:#3090C0}
  #AnyTime--field2 .AnyTime-cur-btn {background-color:#FCF9F6;
      border:1px solid #FFC030;color:#FFC030}
  #AnyTime--field2 .AnyTime-focus-btn {border-style:dotted}
  #AnyTime--field2 .AnyTime-lbl {color:black}
  #AnyTime--field2 .AnyTime-hdr {background-color:#FFC030;color:white}
  </style>
English: <input type="text" id="field1" size="50"
            value="Sunday, July 30th in the Year 1967 CE" /><br/>
Español: <input type="text" id="field2" value="12:34" />