【问题标题】:x-editable datepicker Year/ Month onlyx-editable datepicker 仅限年/月
【发布时间】:2014-05-30 03:34:11
【问题描述】:

我已将 jQuery UI 日期选择器修改为仅显示年份和月份。我已经使用这些 javascript 事件来处理数据:http://jsfiddle.net/2puz2/4/

$( "#datepicker" ).datepicker({
    showButtonPanel: true,
    changeMonth: true,
    changeYear: true,
    dateFormat: 'yy-mm',
    currentText: 'This Month',
    onClose: function(dateText, inst) {
        var month = $('#ui-datepicker-div .ui-datepicker-month :selected').val();
        var year = $('#ui-datepicker-div .ui-datepicker-year :selected').val();
        $(this).datepicker('setDate', new Date(year, month, 1));
        var setMonth = ('0' + (parseInt(month) + 1)).slice(-2);
        $(this).val('Start: ' +  year + '-' + setMonth);
    },
    beforeShow: function(input, inst) {
        if ((datestr = $(this).val()).length > 0) {
            var dateOutOfDesc = datestr.match(/\d{4}\-\d{2}/);
            var dateparts = dateOutOfDesc[0].split('-');
            var year = dateparts[0];
            var month = dateparts[1];
            $(this).datepicker('option', 'defaultDate', new Date(year, month-1, 1));
            $(this).datepicker('setDate', new Date(year, month-1, 1));
        }
    }
});

现在我想使用 x-editable 来编辑这个日期,但我不知道如何将这些回调函数附加到内置日期选择器。我试过了

editable.input.options.datepicker.beforeShow = function(input, inst) {
...

看到这个http://jsfiddle.net/L2Z9Q/18/

但这似乎是在日期选择器已经初始化之后。

有什么想法吗?

【问题讨论】:

    标签: javascript jquery-ui jquery-ui-datepicker x-editable


    【解决方案1】:

    您应该使用onChangeMonthYear 事件(更改月份或年份时触发-docs)来更新日期选择器日期,而不是onClose。我没有解释为什么 onClose 没有被解雇...

    $('#yearmonth').editable({
        pk: 1,
        format: 'yyyy-mm',    
        viewformat: 'yyyy-mm',    
        datepicker: {            
            onChangeMonthYear: function(  year,  month,  inst){
                $(this).datepicker('setDate', new Date(year, month-1, 1));
            }
        }
    })
    

    Fiddle

    【讨论】:

    • 非常非常接近!唯一的问题是我实际上有格式 M-y 并且它没有被 viewformat jsfiddle.net/L2Z9Q/21 拾取我在这里检查了令牌:api.jqueryui.com/datepicker/#utility-formatDate
    • 你的意思是年的下拉列表是4位而不是2位?
    • 嗨,不,它只是忽略了可编辑单元格中的内容,而是默认为当前月份/年份。这是4位数的年份,但没有区别。 jsfiddle.net/L2Z9Q/23
    • 将 data-value 属性与 format 属性一起设置(我认为必须包含一天)。要显示日期,请使用 viewformat 属性。 jsfiddle.net/L2Z9Q/24
    猜你喜欢
    • 1970-01-01
    • 2013-02-05
    • 2010-12-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多