在选择/更改日期更改日历URL

时间:2016-10-21 13:01:13

标签: datepicker jquery-ui-datepicker uidatepicker

我已经搜索并阅读了我在datepicker中的更改/设置网址上找到的所有内容,我尝试过但我无法更改日历的网址...

情况:
在模态窗口中只使用CSS。 我在modal CSS3 pupup中有一个表单,我在其中请求出发日期和结束日期。 我建议最短日期和最长日期,并允许用户更改日期。

问题
如果用户通过单击图标来更改日期(最小值或最大值)并选择其他日期来调用日历,则会关闭模态窗口,使日历保持活动状态。
相反,我希望关闭日历并继续管理模式窗口中的表单域,直到用户单击确认按钮。

这是我读过的修改过的脚本:

    enter code here
from = $( "#from" ).datepicker({
    showOn: "button",
    buttonImage: "images/calendar_icon-32x32.png",
    buttonImageOnly: true,
    buttonText: "From date",
    changeMonth: true,
    dateFormat: 'dd/mm/yy',
    onSelect: function(mindata) {
        if (mindata != dalla_data) {
            dalla_data = mindata;
        };
        window.location.href = "http://index.php?ricid=1&modo=1&tiporic=2&prg=gesric#gesric_form" + this.value;
    }
}).on( "change", function() {
    to.datepicker( "option", "minDate", getDate( this ) );
    display("Got change event from field");
}),
to = $( "#to" ).datepicker({ 
    showOn: "button",
    buttonImage: "images/calendar_icon-32x32.png",
    buttonImageOnly: true,
    changeMonth: true,
    dateFormat: 'dd/mm/yy',
    buttonText: "To date",
    onSelect: function(maxdata) {
        if (maxdata != alla_data) {
            alla_data = maxdata;
        };
        window.location.href = "http://index.php?ricid=1&modo=1&tiporic=2&prg=gesric#gesric_form" + this.value;
    }
}).on( "change", function() {
    from.datepicker( "option", "maxDate", getDate( this ) );
});

$("#from").datepicker('enable');
$("#to").datepicker('enable');

function getDate( element ) {
    var date;
    try {
        date = $.datepicker.parseDate( dateFormat, element.value );
    } catch( error ) {
        date = null;
    }

    return date;
}

但它不起作用,日历链接上的调试仍然存在:

<a class="ui-state-default ui-state-active" href="#">

感谢您的帮助

1 个答案:

答案 0 :(得分:0)

好的,我解决了 我清理了脚本,现在它可以工作了。

$( function() {

from = $( "#from" ).datepicker({
  showOn: "button",
  buttonImage: "images/calendar_icon-32x32.png",
  buttonImageOnly: true,
  buttonText: "From date",
  changeMonth: true,
  dateFormat: 'dd/mm/yy'
    }),

to = $( "#to" ).datepicker({ 
  showOn: "button",
  buttonImage: "images/calendar_icon-32x32.png",
  buttonImageOnly: true,
  buttonText: "To date",
  changeMonth: true,
  dateFormat: 'dd/mm/yy'
    });

$("#from").datepicker('enable');
$("#to").datepicker('enable');

function getDate( element ) {
  var date;
  try {
    date = $.datepicker.parseDate( dateFormat, element.value );
  } catch( error ) {
    date = null;
  }
  return date;
}

});