调用函数时实现datepicker

Question

我有一个网页，其中有一个按钮打开一个小的排序窗口，我必须在那里输入作为开始日期和结束日期并且我想要使用datepicker以便用户可以选择日期，而不是手动在字段中键入它。但是，当用户单击该输入字段时，datepicker不会显示。以下是我到目前为止所拥有的（对于js、html、jquery来说是非常新的）：

<link rel="stylesheet" type="text/css" href="<g:resource dir="css" file="jquery.datetimepicker.css" />"></link>
<script type="text/javascript" src="<g:resource dir="js" file="jquery.datetimepicker.js" />"></script>

<script type="text/javascript">
$(document).ready(function (){
    //some other code     
    jQuery('#startDateForField1').datetimepicker({
        timepicker:false,
        closeOnDateSelect:true,
        format:'Y-m-d'
    });

    jQuery('#endDateForField2').datetimepicker({
        timepicker:false,
        closeOnDateSelect:true,
        format:'Y-m-d'
    });
});
</script>

//this function below is called when a particular button is clicked on
     function someFunc(){
         var modalText = '<div id="roleModelWindow"><table>';
         modalText = modalText + '<tr style="padding-top:10px;"><td class="modelWindowRowTitleLeft">Start Date :</td><td class="modelWindowRowDataCenter"><input  id="startDateForField1" placeholder="YYYY-MM-DD(optional)" style="maxlength:10;height: 30px"/></td>';
         modalText = modalText + '<td class="modelWindowRowTitleLeft">End Date :</td><td class="modelWindowRowDataCenter"><input  id="endDateForField2" placeholder="YYYY-MM-DD(optional)" style="maxlength:10;height: 30px"/></td></tr>';
         modalText = modalText + '</table></div>'

         $.prompt( modalText,{title: "Title of Window",buttons: { "Search": true } ,submit: submitFunc});
     }

Answer 1

根据官方jQuery UI文档。为了制作一个基本的DatePicker,应该包括以下代码。

优化它以最适合您的需要。我已经包含了两个输入。

null

$(document).ready(function() {
  $(".date").datepicker({
    'format': 'dd-mm-yyyy',
    'autoclose': true,
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input id="startDateForField1" class="date" placeholder="YYYY-MM-DD(optional)" style="maxlength:10;height: 30px" />

<input id="startDateForField2" class="date" placeholder="YYYY-MM-DD(optional)" style="maxlength:10;height: 30px" />