Question

我正在使用datepicker-ui。我得到用户选择的日期，并将该月份放在这样的下拉选项中。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Format date</title>
  <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>
  <script>
  $( function() {
    $("#datepicker").datepicker();
	  //Below line will set format for date "Month year" .Note This format is custom,according to the drop down value
      $( "#datepicker" ).datepicker( "option", "dateFormat", "MM yy" );
	  //On change of Date from date picker, this will set value in select dropdown
	  $('#datepicker').change(function(){
			$('#name_id').val($('#datepicker').val());
        });
  } );
  
 
  </script>
</head>
<body>
 
<p>Calendar: <input type="text" id="datepicker" size="30"></p>
 

<div class="input-group col-lg-2 col-md-12 col-sm-12 search">
      <label class="bd-form-label" style="float: left;width: 100%;">Dates</label>
         <select name="name" id="name_id" style="width: 80%;float: left;">
            <option value="">Any Month</option>
            <option value="October 2017">October 2017</option>
            <option value="November 2017">November 2017</option>
            <option value="December 2017">December 2017</option>
            <option value="January 2018">January 2018</option>
         </select>
</div>
 
 
</body>
</html>

它正在工作一个月和一年。是否可以添加另一个选择选项，如下所示：

<select name="name" id="name_id_day" style="width: 80%;float: left;">
   <option value="">Any Day</option>
   <option value="01">01</option>
   <option value="02">02</option>
   <option value="03">03</option>
   <option value="04">04</option>
</select>

在日期旁边，像我一样用月/年更改日期？

我试过改变js脚本：

$( function() {
$("#datepicker").datepicker();
  //Below line will set format for date "Month year" .Note This format is custom,according to the drop down value
  $( "#datepicker" ).datepicker( "option", "dateFormat", "MM yy" );
  //On change of Date from date picker, this will set value in select dropdown
  $('#datepicker').change(function(){
        $('#name_id').val($('#datepicker').val());
    });
} );

致：

$( function() {
$("#datepicker").datepicker();
  //Below line will set format for date "Month year" .Note This format is custom,according to the drop down value
  $( "#datepicker" ).datepicker( "option", "dateFormat", "D MM yy" );
  //On change of Date from date picker, this will set value in select dropdown
  $('#datepicker').change(function(){
        $('#name_id').val($('#datepicker').val());
    });
} );

通过在dateFormat上添加D MM YY天，但之后根本不起作用。

有任何反馈吗？

Answer 1

您可以添加此代码

<script type="text/javascript"> 
var monthyearData = "";
$(function() {
  $("#datepicker").datepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel: false,
    showOn: "button",
    buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
    buttonImageOnly: true,
    dateFormat: 'dd MM YY',
    yearRange: '2017:2020'
  });

  $("#datepicker").datepicker("option", "dateFormat", "d MM yy");
  $('#datepicker').change(function() {
    monthyearData = $('#datepicker').val().split(" ");
    $('#cruise_date').val(monthyearData[1] + " " + monthyearData[2]);
    $('#cruise_date_1').val(monthyearData[0]);
  });
});


</script>

更改两个下拉菜单选择选项取决于datepicker选择日期和月份

1 个答案: