javascript - jQuery Datepicker在一个日历中选择多个日期范围

原文 标签 javascript jquery jquery-ui datepicker jquery-ui-datepicker

我的要求是允许用户在一个日历中选择多个日期范围,也不允许更改以前的日期选择。这怎么可能?下面是fiddle的代码和链接
HTML格式

<p>from</p>
<input type="text" class="spromotion-input-inbody spromotion-input-datepick" id="sproid-bookingcondition-datefrom">
<p>to</p>
<input type="text" class="spromotion-input-inbody spromotion-input-datepick" id="sproid-bookingcondition-dateto">

脚本
$( function() {
    var dateFormat = "mm/dd/yy",
      from = $( "#sproid-bookingcondition-datefrom" )
        .datepicker({
          defaultDate: "+1w",
          changeMonth: true,
          numberOfMonths: 1
        })
        .on( "change", function() {
          to.datepicker( "option", "minDate", getDate( this ) );
        }),
      to = $( "#sproid-bookingcondition-dateto" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1
      })
      .on( "change", function() {
        from.datepicker( "option", "maxDate", getDate( this ) );
      });

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

      return date;
    }
  } );

最佳答案

请检查这是否可以解决您的问题。

$(function() {
    $('input[name="daterange"]').daterangepicker();
    $('input[name="daterange"]').change(function(){
      $(this).val();
      console.log($(this).val());
    });
});

<html>
<head>
<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
 
<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
</head>
<body>
  <input class="pull-right" type="text" name="daterange" value="01/15/2020 - 02/15/2010">
</body>
</html>

相关文章:

jquery - 防止每次选择后关闭Jquery自动完成选项

javascript - 带有背景色的jQuery UI Drop占位符

jquery - 小立方体的圆角图像

javascript - 表单选择未保存在localStorage中

javascript - 如何检查url是javascript中的文件还是文件夹?

javascript - 如何根据另一个日期选择器中的月份选择显示一个日期选择器中的月份

javascript - 与jQuery串联

jquery - 使用asp.net scriptmanager将网站加载到webview中时,jquery document.ready不触发

javascript - Next.js将数据从子组件导入到React中的父页面

javascript - jQuery和JSON:替换JSON数组部分