How to get embedded angular javascript textbox value in pyspark

I have Date Range Picker inside zeppelin %pyspark interpreter like below:

 print("""%angular

 <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
 <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<input type="text" name="datetimes" />

<script>
$(function() {
  $('input[name="datetimes"]').daterangepicker({
    timePicker: true,
    startDate: moment().startOf('hour'),
    endDate: moment().startOf('hour').add(32, 'hour'),
    locale: {
      format: 'M/DD hh:mm A'
    }
  });
});
</script>
""")

I don't know how to get the value selected inside daterangepicker in %pyspark interpreter

Solution

Like already mentioned in the comments, it works currently only with the spark scala interpreter. I have used your code to get and set the value of your daterangepicker, but I have to admit that it wasn't stable (sometimes it worked and sometimes it didn't). I'm not sure if further changes to your daterangepicker are required to handle initial values, as I have no clue of angluar or if the zeppelin backend angular API is not yet ready for production. Maybe you or someone else can figure this out based on my approch.

One important thing you have to do is to bind the variable and add the ng-model attribute to the tag you want to bind.

z.angularBind("choice", "6/04 03:00 AM - 6/23 11:00 AM")
println("""%angular

 <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
 <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<input type="text" name="datetimes" ng-model="choice"/>

<script>
$(function() {
  $('input[name="datetimes"]').daterangepicker({
    timePicker: true,
    startDate: moment().startOf('hour'),
    endDate: moment().startOf('hour').add(32, 'hour'),
    locale: {
      format: 'M/DD hh:mm A'
    }
  });
});
</script>
""")

You can fetch the values in another %spark paragraph with:

println(z.angular("choice"))
//6/04 03:00 AM - 6/25 12:00 AM