Back to Questions
3.1k
views6
comments
Using DateTime in Websharper
websharper

I have the following simple code:

1
2
3
4
5
6
7
8
9
10
11
12

module Client =
    [<JavaScript>]
    let ShowTime() =
        System.DateTime.Now.ToString()

module Controls =
    type TimeControl() =
        inherit Web.Control()

        [<JavaScript>]
        override this.Body = Div [Text (Client.ShowTime())] :> _
..

It does not work as expected: instead of current time the control displays [object object]. But if I change ShowTime attribute from [<JavaScript] to [<Rpc>], it works fine and displays the current time. WebSharper manual says that DateTime and TimeSpan are among types supported in JavaScript code. Shouldn't it be possible then to use DateTime.Now on a client side?

Thanks in advance.
Vagif

P.S. Just want to extend my question. What would be the Websharpish way of creating a timer that would trigger certain update, e.g. updating the text? I didn't find any examples that would show how to achieve this.

.

This is most definitely a bug in the underlying proxy. For now, you can use a custom inline to alleviate the problem:

1
2
3
4
5
6
7
8
9
10
11
12

module Client =

    [<Inline "Date().toLocaleString()">]
    let DateAndTime() = failwith "N/A"

module Controls =
    type TimeControl() =
        inherit Web.Control()
 
        [<JavaScript>]
        override this.Body = Div [Text (Client.DateAndTime())] :> _
...
By on 2/10/2012 6:59 PM ()

Two comments:

  1. I do not believe this is a "bug". There are many ways to format DateTime, so none were chosen. Knowing your own needs, you may either use the [<Inline>] attribute to use a built-in JavaScript formatter (such as _.toLocaleString()) or write your won formatter.
  2. We've seen several occasions where putting a failwith "..." in the Inline function causes problem. It is better to use X (from IntelliFactory.WebShaper.Pervasives).
By on 2/11/2012 1:08 AM ()

I usually recommend adding logic that is equivalent to the inline, unless 1) that logic is hard to implement faithfully, and/or 2) the function won't be called from server-side code. In these cases, you can fall back to the default value approach you quoted, or simply raising an exception. The latter provides a useful tool for discovering and correcting occurrences where you unintentionally call the method from server-side code.

By on 2/11/2012 5:47 AM ()

Note that you don't need an inline to use the standard JavaScript Date object. It is present under the namespace IntelliFactory.WebSharper.EcmaScript:

1
2
3

[<JavaScript>]
let getDateString() =
  EcmaScript.Date().ToLocaleString()

For your last question, if what you want to do is run the text update after a given time, you can use the standard JavaScript setTimeout:

1
2
3
4
5
6

[<JavaScript>]
override this.Body =
  let div = Div []
  let update() = div.Text <- "Timer has finished."
  JavaScript.SetTimeout update 3000 |> ignore // time in milliseconds
  div :> _
By on 2/11/2012 1:33 AM ()

There is also JavaScript.SetInterval, if you need repetition (like the Windows' Timer control).

By on 2/11/2012 3:50 AM ()

Thank you guys for great replies. I believe using EcmaScript gives most elegant solution. Loic also gave a good hint about using a timer.

By on 2/11/2012 2:56 AM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy     		Built with WebSharper