0

I am looking for a date range picker in which first click is to select a start date, the calendar is then refreshed and second click is to select an end date. All date ranger picker i am finding has two calendars with start and end dates to select at the same time.

Has anyone done anything like that.

Any suggestion or help would be appreciated.

Thanks in advance

Owais Ahmed
  • 1,364
  • 1
  • 30
  • 62
  • Hi @Owais you can use jQuery Picker https://www.aspsnippets.com/Demos/917/ try this link. Thank you – Videsh Chauhan Apr 01 '19 at 04:55
  • Thanks but i need one datepicker which selects the start date and refreshes to select the end date – Owais Ahmed Apr 01 '19 at 05:00
  • https://www.npmjs.com/package/angular-moment-picker take a look here – RK_oo7 Apr 01 '19 at 05:05
  • Post with similar problem with some nice solutions. [Javascript Date Range Picker - Single Calendar for Range Selection](https://stackoverflow.com/questions/41770018/javascript-date-range-picker-single-calendar-for-range-selection) – imondal007 Apr 01 '19 at 05:06
  • Use simple https://angular-ui.github.io/bootstrap/ ui-bootstrap-tpls datepicker 1. When you select the first date save it in a different variable then your model. 2. Refresh the calendar using the help from https://gist.github.com/cgmartin/3daa01f910601ced9cd3 3. use the saved date to highlight the calendar using customneClass method provided 4. select the new date and use it as end date. – Gaurav Singh Apr 01 '19 at 06:48

3 Answers3

2

I think you are looking for this.

 $( function() {
       $( "#fromDate" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1,
       
        onClose: function( selectedDate ) {
            $("#toDate").datepicker("option", "minDate", selectedDate);
        }
    });
    $( "#toDate" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1,
        onClose: function( selectedDate ) {
            $( "#fromDate" ).datepicker( "option", "maxDate", selectedDate );
        }
    });
  } );
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <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>
</head>
<body>
 
<p>From: <input type="text" id="fromDate"></p>
<p>To: <input type="text" id="toDate"></p>
 
 
</body>
</html>
Negi Rox
  • 3,828
  • 1
  • 11
  • 18
0

I'm using react-day-picker and it's highly customizable. Or try of airbnb which is lil bit heavy and consumes higher CPU

SBimochan
  • 474
  • 4
  • 13
0

please check i guess one of these method would help you ,

Note : I am clueless whether posting a third party link is prohibited on stackoverflow , if so please let me know to remove the link below,

http://www.daterangepicker.com/#examples

Thilanka A. Weerasinghe
  • 74
  • 8