无法使用变量将Datepicker移动到设置日期

Question

运行jQuery 1.91和Jquery UI 11.2.1以及jeditables。

我为jeditables设置了一个插件（我发现），以启用日期选择器，对它进行轻微编辑，但它一般运行良好。

我尝试根据格式不正确的日期输入设置 插件的defaultDate或setDate选项。

我有一个函数，它接受现有的日期文本并将其重新格式化为正确的日期选择器格式。但是，即使格式正确，我似乎也无法使用defaultDate选项查看新的日期字符串。

注意：由于datepicker问题，每次调用datepicker后都必须单击 Run Snippet 按钮，以便页面刷新。完全是一个不同的问题。

＆＃13;

＆＃13;

$(document).ready(function() {

//datepicker element
$('.editdate').datepicker('getDate');

//the datepicker initialization....
$('#main_container').on('click','.editdate',function () {
	 $(this).editable("file.php", {
    indicator : 'o',
	submit : 'X',
    cssclass : 'edit_date',
    type: 'datepicker',
    event : "dblclick",
    onblur: 'Cancel',
    callback: function() {
	}
  	});
});

//just shows the conversion of the text
$('.example').html(function() {
		var oTxt = $(this).text();
		var val = oTxt.replace(' ','-');
		val = val.replace(', ','-');
		var selected = convertDate(val);
    return selected;
 });


}); //doc ready


// ##### Datepicker!!!!!
$.editable.addInputType('datepicker', {
	element : function(settings, original) {
		var input = $('<input>');
		//var input = $('<input size=8 />');
		if (settings.width  != 'none') { input.width(settings.width);  }
		if (settings.height != 'none') { input.height(settings.height); }
		input.attr('autocomplete','off');
		$(this).append(input);
		return(input);
    },
    plugin : function(settings, original) {
        var form = this;
        settings.onblur = function(e) {
			t = setTimeout(function() {
			original.reset.apply(form, [settings, original]); }, 500);

		};
		
		//converts existing text to proper fomat
		var oTxt = $(this).text();
		var val = oTxt.replace(' ','-');
		val = val.replace(', ','-');
		var selected = convertDate(val);
		
		
		//Call datepicker
        $(this).find('input').datepicker({
        firstDay: 0,
        dateFormat: 'yy-mm-dd',
		  
   	  defaultDate: '"' + selected + '"',
   	  //defaultDate: new Date('"' + selected + '"'),
   	  //defaultDate: new Date(selected),
   	  //defaultDate: '2017-07-25',
		  
        onSelect: function(dateText,init) {
        	$(this).hide();
        	$(form).trigger('submit'); },
        onClose: function(dateText, init) {
            original.reset.apply(form, [settings, original]);
            $(original).addClass( settings.cssdecoration );
            $(form).hide();
            $(form).parent().html(dateText);
            },
    })
    }
});

//convert text date to proper string
function convertDate(d){
 var parts = d.split("-");
 var months = {
  Jan: "01",
  Feb: "02",
  Mar: "03",
  Apr: "04",
  May: "05",
  Jun: "06",
  Jul: "07",
  Aug: "08",
  Sep: "09",
  Oct: "10",
  Nov: "11",
  Dec: "12"
 };
 return parts[2]+"-"+months[parts[0]]+"-"+parts[1];
}

＆＃13;

div { padding: 20px; background: #eee; }
.editdate { float: left; cursor: pointer; display: block; padding: 5px 8px; font-size: 14px; width: 100px; background: #aaa; color: #fff; text-align: center;margin-right: 20px;}
.code { display: block; background: #eee; padding: 10px; margin: 10px; }

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jeditable.js/1.7.3/jeditable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>

<div id="main_container">
<span class="bx airdate">
	<span class="editdate airdatet" id="ep_date-02" data="02">Jul 25, 2017</span> <-- double-click to call datepicker
</span>
</div>

<p>Double click the date.... desire is to have datepicker open with <em>that</em> date <strong>selected</strong>.</p>

<p>Note the lines in the plugin function:</p>
<p class="code">defaultDate: '"' + selected + '"',<br />
   	  //defaultDate: new Date('"' + selected + '"'),<br />
   	  //defaultDate: new Date(selected),<br />
   	  //defaultDate: '2017-07-25',</p>
<p>If you uncomment the last line, things work. None of the others will. <strong>I can't get the variable to work.</strong></p>

<p>Example of what the text conversion outputs:</p>
<p class="example code" id="ep_date-02" data="02">Jul 25, 2017</p>
<p>So it seems to be more a matter of placement of the javascript.</p>

＆＃13;

＆＃13;

＆＃13;

注意插件函数中的行：

defaultDate: '"' + selected + '"',
//defaultDate: new Date('"' + selected + '"'),
//defaultDate: new Date(selected),
//defaultDate: '2017-07-25',

我还使用String()，toPrimitive()和toString()尝试了各种格式。我无法让那些工作得好。

如果取消注释最后一行，事情就会奏效。其他人都不会。

我无法让变量发挥作用。

我也尝试将其移到实际的doc ready datepicker初始化函数中，也没有任何关于变量的工作。我也花了很多时间在任何这里与日期选择器相关而没有运气。

有人可以告诉我在哪里踌躇吗？

jsFiddle is here if you'd rather play there

Answer 1

问题：

defaultDate: '"' + selected + '"',

取决于以下行：

var oTxt = $(this).text();

将该行更改为：

var oTxt = $(this).find('input').val();

在这种情况下，此 引用了form.edit_date，因此它是错误的。

摘录：

$(document).ready(function() {


    $('.editdate').datepicker('getDate');

    $('#main_container').on('click','.editdate',function () {
        $(this).editable("file.php", {
            indicator : 'o',
            submit : 'X',
            cssclass : 'edit_date',
            type: 'datepicker',
            event : "dblclick",
            onblur: 'Cancel',
            // defaultDate: convertDate(oTxt),
            callback: function() {
            }
        });
    });


}); //doc ready


// ##### Datepicker!!!!!
$.editable.addInputType('datepicker', {
    element : function(settings, original) {
        var input = $('<input>');
        //var input = $('<input size=8 />');
        if (settings.width  != 'none') { input.width(settings.width);  }
        if (settings.height != 'none') { input.height(settings.height); }
        input.attr('autocomplete','off');
        $(this).append(input);
        return(input);
    },
    plugin : function(settings, original) {
        /* Workaround for missing parentNode in IE */
        var form = this;
        //settings.onblur = 'submit';
        settings.onblur = function(e) {
            t = setTimeout(function() {
                original.reset.apply(form, [settings, original]); }, 500);

        };

        //converts existing text to proper fomat
        var oTxt = $(this).find('input').val();
        var val = oTxt.replace(' ','-');
        val = val.replace(', ','-');
        var selected = convertDate(val);


        //Call datepicker
        $(this).find('input').datepicker({
            firstDay: 0,
            dateFormat: 'yy-mm-dd',

            defaultDate: new Date('"' + selected + '"'),
            //defaultDate: '2017-07-25',

            onSelect: function(dateText,init) {
                $(this).hide();
                $(form).trigger('submit'); },
            onClose: function(dateText, init) {
                original.reset.apply(form, [settings, original]);
                $(original).addClass( settings.cssdecoration );
                $(form).hide();
                $(form).parent().html(dateText);
            },
        })
    }
});

//convert text date to proper string
function convertDate(d){
    var parts = d.split("-");
    var months = {
        Jan: "01",
        Feb: "02",
        Mar: "03",
        Apr: "04",
        May: "05",
        Jun: "06",
        Jul: "07",
        Aug: "08",
        Sep: "09",
        Oct: "10",
        Nov: "11",
        Dec: "12"
    };
    return parts[2]+"-"+months[parts[0]]+"-"+parts[1];
}

div { padding: 20px; background: #eee; }
.editdate { cursor: pointer; display: block; padding: 5px 8px; font-size: 14px; width: 100px; background: #aaa; color: #fff; text-align: center;}

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jeditable.js/1.7.3/jeditable.min.js"></script>


<div id="main_container">

<span class="bx airdate">

	<span class="editdate airdatet" id="ep_date-02" data="02">Jul 25, 2017</span>

</span>

</div>