search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

How to get Date from Navigator using JavaScript and copy to textbox

Asked by Cezar
3 years ago.

Hi

I would like to get Date from Navigator when I click on specific day and copy the date to a textbox. How can I do it using JavaScript? Also I would like to change the date in Navigator when I chose a date from input (type date-picker).

Answer posted by Dan Letecky [DayPilot]
3 years ago.

1. You can get the current selection using the following properties:
* nav.selectionDay - the exact day that was clicked
* nav.selectionStart - start of the selection
* nav.selectionEnd - end of the selection (note that this is an exact time point)

The selectionDay and selectionStart values will always be the same only for selectMode = "Day".

See also:
https://api.daypilot.org/daypilot-navigator-selectionday/
https://api.daypilot.org/daypilot-navigator-selectionstart/
https://api.daypilot.org/daypilot-navigator-selectionend/

You can watch the changes using onBeforeTimeRangeSelected:
https://api.daypilot.org/daypilot-navigator-ontimerangeselected/

2. You can select a specific date by calling nav.select(date):
https://api.daypilot.org/daypilot-navigator-select/

Comment posted by Cezar
3 years ago.

Thanks for reply.

Seems

TimeRangeSelectedHandling = DayPilot.Web.Mvc.Events.Navigator.TimeRangeSelectedHandlingType.JavaScript,
TimeRangeSelectedJavaScript = "DateChange()",

don't work, if I bind DateChange() to any onclick input then it works, but if I bind it to TimeRangeSelectedJavaScript it doesn't work on day changing. Also how to get only date in dd-mm-yyyy from selectionDay, because it displays yyyy-mm-ddThh:mm:ss ? How to make TimeRangeSelectedJavaScript working?

Comment posted by Cezar
3 years ago.

OK Nevermind, just need to get TimeRangeSelectedJavaScript working, rest I've already done by myself.

Comment posted by Dan Letecky [DayPilot]
3 years ago.

What version of DayPilot do you use?

This seems to work fine (modified Views/Calendar/Index.cshtml from the demo):

    @Html.DayPilotNavigator("dpn", new DayPilotNavigatorConfig { 
        ShowMonths = 3,
        SkipMonths = 3,
        ShowWeekNumbers = true,
        BoundDayPilot = "dpc",
        SelectMode = NavigatorSelectMode.Week,
        BackendUrl = Url.Content("~/Calendar/NavigatorBackend"),
        VisibleRangeChangedHandling = VisibleRangeChangedHandlingType.CallBack,
        TimeRangeSelectedHandling = TimeRangeSelectedHandlingType.JavaScript,
        TimeRangeSelectedJavaScript = "alert('test');"
    })

Just for completeness, the date can be formatted using .toString() method:

var str = dpn.selectionStart.toString("dd-MM-yyyy");
Comment posted by Cezar
3 years ago.

I'm using the newest Pro MVC version.

@Html.DayPilotNavigator("nv", new DayPilotNavigatorConfig
{
ShowMonths = 1,
CellWidth = 28,
TimeRangeSelectedHandling = DayPilot.Web.Mvc.Events.Navigator.TimeRangeSelectedHandlingType.JavaScript,
TimeRangeSelectedJavaScript = "DateChange()",
})

and my script

<script type="text/javascript">
function DateChange()
{
var data1 = document.getElementById("Data");
var data = new Date(nv.selectionStart);
var year = data.getFullYear();
var month = (1 + data.getMonth()).toString();
month = month.length > 1 ? month : '0' + month;
var day = data.getDate().toString();
day = day.length > 1 ? day : '0' + day;
data1.value = year + '-' + month + '-' + day;
}
</script>

Script works fine if I bind it into "onclick" event in any element, but doesn't work with changing days in navigator.

Comment posted by Dan Letecky [DayPilot]
3 years ago.

This seems to work fine:

@Html.DayPilotNavigator("nv", new DayPilotNavigatorConfig
   {
       ShowMonths = 1,
       CellWidth = 28,
       TimeRangeSelectedHandling = DayPilot.Web.Mvc.Events.Navigator.TimeRangeSelectedHandlingType.JavaScript,
       TimeRangeSelectedJavaScript = "DateChange(start, end)",
   })

<input id="Data" />
<script>
    function DateChange(start, end) {
        var data1 = document.getElementById("Data");
        data1.value = start.toString("dd-MM-yyyy");
    }

</script>

Let me know if it doesn't help.

Comment posted by Cezar
3 years ago.

It's not working. It doesn't even go into this script function, I put console.log inside and it doesn't even show text in Chrome console.

Comment posted by Dan Letecky [DayPilot]
3 years ago.

I pasted the snippet above into the demo view and it works fine for me. Do you see any JavaScript error in the console?

You can also try this:

@Html.DayPilotNavigator("nv", new DayPilotNavigatorConfig
   {
       ShowMonths = 1,
       CellWidth = 28,
       TimeRangeSelectedHandling = DayPilot.Web.Mvc.Events.Navigator.TimeRangeSelectedHandlingType.JavaScript,
       TimeRangeSelectedJavaScript = "alert(start)",
   })
Comment posted by Cezar
3 years ago.

It doesn't work. I have no idea why. There are no errors or informations in chrome console... But same JS function works fine (ofc without arguments) with any onclick element event...

Comment posted by Dan Letecky [DayPilot]
3 years ago.

Can you please check the output HTML?

For the last example, it should look like this:

<div id='nv'></div>
<script type='text/javascript'>
/* DayPilotPro: 8.3.0.0 */
var nv = new DayPilot.Navigator('nv');
nv.api = 1;
nv.cellHeight = 20;
nv.cellWidth = 28;
nv.command = 'navigate';
nv.theme = '';
nv.cssOnly = true;
nv.dayHeaderHeight = 20;
nv.locale = 'en-us';
nv.month = 12;
nv.orientation = 'Vertical';
nv.rowsPerMonth = 'Six';
nv.selectMode = 'day';
nv.selectionStart = new DayPilot.Date('2016-12-12T00:00:00');
nv.selectionEnd = new DayPilot.Date('2016-12-12T00:00:00');
nv.showMonths = 1;
nv.showWeekNumbers = false;
nv.skipMonths = 1;
nv.titleHeight = 20;
nv.weekStarts = 0;
nv.weekNumberAlgorithm = 'Auto';
nv.year = 2016;
nv.onAjaxError = function(args) { var request = args.request; if (DayPilot.Modal) { new DayPilot.Modal().showHtml(args.request.responseText); } else { alert('AJAX callback error (500)'); };  };nv.timeRangeSelectedHandling = 'JavaScript';
nv.onTimeRangeSelected = function(start, end) { alert(start); };
nv.visibleRangeChangedHandling = 'JavaScript';
nv.onVisibleRangeChanged = function(start, end) { ; };
DayPilot.Locale.register(new DayPilot.Locale('en-us', {'dayNames':['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],'dayNamesShort':['Su','Mo','Tu','We','Th','Fr','Sa'],'monthNames':['January','February','March','April','May','June','July','August','September','October','November','December',''],'monthNamesShort':['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec',''],'timePattern':'h:mm tt','datePattern':'M/d/yyyy','dateTimePattern':'M/d/yyyy h:mm tt','timeFormat':'Clock12Hours','weekStarts':0}));
nv.init();
</script>
Comment posted by Cezar
3 years ago.

This is my full webpage code
http://pastebin.com/4xXr93KB

Comment posted by Cezar
3 years ago.

Your code works great with my function, so I have no idea why it is not working with MVC one...

Comment posted by Dan Letecky [DayPilot]
3 years ago.

Can you please try this simplified view?

@using DayPilot.Web.Mvc;

@{
    ViewBag.Title = "Home Page";
}

<script src="@Url.Content("~/Scripts/DayPilot/daypilot-all.min.js")" type="text/javascript"></script>

@Html.DayPilotNavigator("nv", new DayPilotNavigatorConfig
{
    ShowMonths = 1,
    CellWidth = 28,
    TimeRangeSelectedHandling = DayPilot.Web.Mvc.Events.Navigator.TimeRangeSelectedHandlingType.JavaScript,
    TimeRangeSelectedJavaScript = "DateChangeOnNavigator()"
})

<input class="form-control" id="Data" onclick="DateChangeOnNavigator()" />

<script type="text/javascript">
    function DateChangeOnNavigator()
    {
        var data = document.getElementById("Data");
        data.value = nv.selectionStart.toString("yyyy-MM-dd");
    }
</script>

Let me know if it makes any difference.

Comment posted by Cezar
3 years ago.

It works, so where is the problem?

Comment posted by Dan Letecky [DayPilot]
3 years ago.

It looks like something might be interfering with the event handler (I've never seen that but it looks like it indeed does). Now you need to try adding back the pieces of your original view one by one until it stops working - so you'll know what is the culprit.

You can also try it the other way - try disabling all external js <script> references first. This is the most likely source of the problem.

Comment posted by Cezar
3 years ago.

This script is creating a problem, when I commented it then putting date in input is working fine...

<script type="text/javascript">
var switcher = new DayPilot.Switcher();

switcher.addView(dp_day);
switcher.addView(dp_week);

switcher.addButton("toolbar_day", dp_day);
switcher.addButton("toolbar_week", dp_week);

switcher.addNavigator(nv);

switcher.show(dp_day);
</script>

Why is it making a problem?

Comment posted by Dan Letecky [DayPilot]
3 years ago.

Oh, sorry - I forgot about that one.

The Switcher redefines the onTimeRangeSelected handler so it can forward the change to the view that is active right now.

You can define onTimeRangeSelected for the switcher instead:

<script type="text/javascript"> 
  var switcher = new DayPilot.Switcher();

  switcher.addView(dp_day); 
  switcher.addView(dp_week);

  switcher.addButton("toolbar_day", dp_day); 
  switcher.addButton("toolbar_week", dp_week);

  switcher.addNavigator(nv);

  switcher.onTimeRangeSelected = function(args) {
    DateChangeOnNavigator();
  };

  switcher.show(dp_day); 
</script>
Comment posted by Cezar
3 years ago.

I did it, but now it doesn't change my calendar Date.

Comment posted by Dan Letecky [DayPilot]
3 years ago.

Is there any error in the JavaScript console?

Comment posted by Cezar
3 years ago.

No errors in console.

Comment posted by Dan Letecky [DayPilot]
3 years ago.

One more question:

> I did it, but now it doesn't change my calendar Date.

Does that mean it doesn't update the Calendar control or the <input>?

Comment posted by Cezar
3 years ago.

It doesn't update Calendar, input is being updated very well.

Comment posted by Dan Letecky [DayPilot]
3 years ago.

The event handler defined using switcher.onTimeRangeSelected is fired after the Calendar update is requested - it shouldn't affect it in any way. You should see a POST request to the URL specified using BackendUrl with "action":"Command" and "command":"navigate" properties.

I'll have to create a test page and try to reproduce the issue.

Comment posted by Cezar
3 years ago.

With .onTimeRangeSelected = function..... it doesn't go to command, but if I delete this line it goes to command but does not change the input.

Comment posted by Dan Letecky [DayPilot]
3 years ago.

Something like this would happen if you used this:

<script type="text/javascript"> 
  var switcher = new DayPilot.Switcher();

  // ...
  
  nv.onTimeRangeSelected = function(args) {
    DateChangeOnNavigator();
  };

  // ...

</script>

instead of this:

<script type="text/javascript"> 
  var switcher = new DayPilot.Switcher();

  // ...
  
  switcher.onTimeRangeSelected = function(args) {
    DateChangeOnNavigator();
  };

  // ...

</script>

Can you please check if the event handler is defined on "switcher" and not "nv"?

Answer posted by Cezar
3 years ago.

I changed nv.onTimeRangeSelected into switcher.onTimeRangeSelected and now it works perfectly, it changes both the calendar and input. Thanks a lot!

Comment posted by Dan Letecky [DayPilot]
3 years ago.

Great, thanks for the update!

This question is more than 3 months old and has been closed. Please create a new question if you have anything to add.