Question

我已经成功实现了一个带有datetimepicker的单选按钮栏：如果单击单选按钮，它会显示一个datetimepicker。它适用于Firefox和Chrome，但不适用于Safari。如果我将类型更改为文本而不是无线电，它可以工作。有什么建议？这是我的HTML：

<div class="customIntervalselect ui-buttonset" id="3297f685-ddac-4309-8750-e377f91216f8" style="display: block; ">
<input type="radio" id="ce08067f-a61c-4bb4-89bf-b0dd8f3d685f" value="12" name="start" class="ui-helper-hidden-accessible">
<label for="ce08067f-a61c-4bb4-89bf-b0dd8f3d685f" title="start" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left ui-state-active" role="button" aria-disabled="false" aria-pressed="true">
<span class="ui-button-text">start</span>
</label>
<input type="radio" id="17f2fd11-735c-432b-b9de-b01b25b2e38b" value="13" name="end" class="ui-helper-hidden-accessible">
<label for="17f2fd11-735c-432b-b9de-b01b25b2e38b" title="end" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right ui-state-active" role="button" aria-disabled="false" aria-pressed="true">
<span class="ui-button-text">end</span>
</label>
</div>

这里是js：

this.uuidcustomIntervalselect = Uuid(); //give uuid to the custom button datepicker, the comparison graphs have to be indipendent in hovering

var uuidStart      = Uuid(); //create a unique id for the DOM elements
var uuidStop       = Uuid();
var startbuttontxt = tr("start");
var endbuttontxt   = tr("end");

this.CustomButtonDatePickers = $("<div>", {"class": "customIntervalselect","id": this.uuidcustomIntervalselect});

//create custom button datepickers
timescaleCustomButtonDatePickers[0] = $("<input>", {
    type: "radio",
    id:    uuidStart,
    value: 12,
    name: "start"
});

//create button labels!
var labelstart = $("<label>", {
    "for": uuidStart, 
    title: startbuttontxt
}).append(startbuttontxt);

//create custom button datepickers
timescaleCustomButtonDatePickers[1] = $("<input>", {
    type: "radio",
    id:    uuidStop,
    value: 13,
    name: "end"
});

//create button labels!
var labelstop = $("<label>", {
    "for": uuidStop, 
    title: endbuttontxt
}).append(endbuttontxt);

var startTime;
var stopTime;

//start time
timescaleCustomButtonDatePickers[0].datetimepicker({
    datepicker: false,   
    dateFormat: '',
    timeFormat: 'hh:mm tt',
    onSelectTime: function(dateText) {
        console.log("test 03");
        startTime = new XDate(dateText);
        timescaleCustomButtonDatePickers[0].prop("checked", false).button('refresh'); //uncheck other buttons  
        timescaleCustomButtonDatePickers[1].prop("checked", false).button('refresh'); //uncheck other buttons

        timescaleCustomButtonDatePickers[1].datetimepicker({
            minTime: "00:00"
        });

        var mintime = this.validateSelectedTime(startTime,dateText);

        timescaleCustomButtonDatePickers[1].datetimepicker({
            minTime: mintime
        });
    }.bind(this)
});

//stop time
timescaleCustomButtonDatePickers[1].datetimepicker({
    datepicker: false,
    dateFormat: '',
    timeFormat: 'hh:mm tt',
    allowTimes:["0:00", "1:00", "2:00", "3:00", "4:00", "5:00", "6:00", "7:00", "8:00", "9:00", "10:00", "11:00", "12:00", 
     "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00", "23:59"],
    onSelectTime: function(dateText) {
        stopTime = new XDate(dateText);
        this.timeScale = this.timeScales[7];
        this.timeScale.setTime(startTime, stopTime, this.selectedDate);
        this.timeScaleOptions[7].prop("checked", true).button('refresh');
        this.getResults();
        timescaleCustomButtonDatePickers[0].prop("checked", false).button('refresh'); //uncheck other buttons  
        timescaleCustomButtonDatePickers[1].prop("checked", false).button('refresh'); //uncheck other buttons  
    }.bind(this)
});

this.CustomButtonDatePickers.append(timescaleCustomButtonDatePickers[0], labelstart, timescaleCustomButtonDatePickers[1], labelstop); //add buttons to timescale button bar div

this.CustomButtonDatePickers.buttonset().change(this.setTimescale.bind(this));  //inherit css ui shit from jquery

Answer 1

作为一种解决方法，您可以尝试为每个单选按钮添加文本输入。选中单选按钮时，它们会触发文本输入上的单击事件：

HTML

<input type="radio" name="start" class="showCalendar">
<input type="text" class="hidden start" />

<input type="radio" name="end" class="showCalendar">
<input type="text" class="hidden end" />

CSS

input.hidden {
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    visibility: hidden;
}

JS

$('input.showCalendar').change(function(){
    $('input.' + $(this).attr('name')).trigger('click');
});

$('input.start, input.end').click(function(){
    console.log('test');
});

// in your case would be something like:

$('input.start, input.end').showCalendar();

以下是a Fiddle以显示其实际效果

Answer 2

我通过将type: "radio"替换为type : "submit"

来解决

JQuery单选按钮datetimepicker不在safari上工作

2 个答案: