DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

How can I use the jQuery UI Datepicker Client Side "Date Range" with Editor?

How can I use the jQuery UI Datepicker Client Side "Date Range" with Editor?

dt1 dt1 Posts: 52Questions: 5Answers: 0
in Free community support

https://jqueryui.com/datepicker/#date-range
I want to do the From-To Range calculation (and validation) on the Client side

This question has accepted answers - jump to:

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    Hi @dt1 ,

    Take a nose at this page here, this should get you going,

    Cheers,

    Colin

  • dt1 dt1 Posts: 52Questions: 5Answers: 0
    edited July 2018

    Hi Colin,
    Thank you for replying.
    Actualy I got the datapicker up and running on the Editor main window (I use Envelope).
    The point is that I want to tie up the date fields "From" "To" and I can not find a way to apply the logic as described in the jQuery UI website.
    I have to do it inside Editor fields (they do it in plain HTML)

    $( function() {
    var dateFormat = "mm/dd/yy",
      from = $( "#from" )
        .datepicker({
          defaultDate: "+1w",
          changeMonth: true,
          numberOfMonths: 3
        })
        .on( "change", function() {
          to.datepicker( "option", "minDate", getDate( this ) );
        }),
      to = $( "#to" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3
      })
      .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;
    }
  } );
  </script>
</head>
<body>
 
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
 
 
</body>
</html>
  • allanallan Posts: 63,455Questions: 1Answers: 10,465 Site admin
    Answer ✓

    The key here is the:

            .on( "change", function() {
          to.datepicker( "option", "minDate", getDate( this ) );
        }),

    part. You basically want to replicate that with Editor's built in jQuery UI date picker option. You could do that using something like:

    editor.field('minDate').input().on( 'change', function () {
  editor.field('maxDate').input().datepicker( "option", "minDate", getDate( this ) );
} );

    You might need to change getDate a little, it depends upon the exact configuration.

    Allan

  • dt1 dt1 Posts: 52Questions: 5Answers: 0

    Thanks Allan,
    I will work on this (will probably take me some time)
    meantime I reverted back to "Datetime" without any validation.
    Works ok
    Thanks again
    Elan

  • allanallan Posts: 63,455Questions: 1Answers: 10,465 Site admin

    If you are using the datetime input type, you can do the same thing - it has maxDate and minDate methods which can be used similar to the jQuery UI code I suggested above.

    Allan

  • dt1 dt1 Posts: 52Questions: 5Answers: 0

    Thanks again.
    And what is the selector of the date time widget? It is not documented. Is it "datetime" or "editor-datetime". The options ar "opts" or what?

    Elan

  • allanallan Posts: 63,455Questions: 1Answers: 10,465 Site admin
    Answer ✓

    Hi Elan,

    The datetime reference documents the options and methods available for Editor's built in date/time input - e.g. editor.field( fieldName ).minDate( date ).

    Allan

  • dt1 dt1 Posts: 52Questions: 5Answers: 0

    Thank you Allan

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.