首页 文章

完整的日历日期时间选择器问题Jquery

提问于
浏览 次
0

我正在使用datetimepicker插件通过fullcalendar中的自定义按钮显示迷你日历，我正在使用此代码来显示它

customButtons: {
        datePickerButton: {
            themeIcon:'circle-triangle-s',
            click: function () {


                var $btnCustom = $('.fc-datePickerButton-button'); // name of custom  button in the generated code
                $btnCustom.after('<input type="hidden" id="hiddenDate" class="datepicker"/>');

                $("#hiddenDate").datepicker({
                    showOn: "button",

                    dateFormat:"yy-mm-dd",
                    onSelect: function (dateText, inst) {
                        $('#calendar').fullCalendar('gotoDate', dateText);
                    },
                });

                var $btnDatepicker = $(".ui-datepicker-trigger"); // name of the generated datepicker UI 
                //Below are required for manipulating dynamically created datepicker on custom button click
                $("#hiddenDate").show().focus().hide();
                $btnDatepicker.trigger("click"); //dynamically generated button for datepicker when clicked on input textbox
                $btnDatepicker.hide();
                $btnDatepicker.remove();
                $("input.datepicker").not(":first").remove();//dynamically appended every time on custom button click

            }
        }
    }

它工作正常，但现在我需要一个输入字段，我可以显示当前日期，目前我只有自定义按钮，当我点击它打开迷你日历，这是它应该是什么样子

Example.png

jquery fullcalendar

1 回答

  • 0

    你可以使用datepicker的onselect事件

    HTML

    <input name="dtpicker" class="datepicker form-control" id="datepicker1">
<br>
<input id="datepickervalue">

    JS

    $(".datepicker").datepicker({
onSelect: function(dateText, inst) {
    $("#datepickervalue").val(dateText);
  }
});

    小提琴参考

    https://jsfiddle.net/L5ok81h8/1/
    回复于

相关问题