DatePicker: cannot select/tap today's date

How-to Discussions
1

When DatePicker pops up it’s not possible to select/tap today’s date. Below the full app. You may tap every date and it works properly: the selected date is ‘picked’, it is shown in the text box and the DatePicker is closed. But if you restart the app and wish to select today’s date so you tap the current date it does nothing. In this case it seems that the DatePicker does not trigger as it doesn’t even close.

<App>
    <JavaScript>
        var Observable          = require("FuseJS/Observable");

        var showDatePicker      = Observable(false);
        var selectedDate        = Observable();
        var datePicked          = Observable();

        selectedDate.onValueChanged(module, function(date) {
            if (Object.prototype.toString.call(date) === '[object Date]') {
                datePicked.value = date;
                toggleDatePicker();
            }       
        });

        function toggleDatePicker(){
            if (showDatePicker.value) {
                showDatePicker.value = false;
            } else {
                showDatePicker.value = true;
            }
        }

         module.exports = {
            toggleDatePicker:   toggleDatePicker,
            showDatePicker:     showDatePicker,
            selectedDate:       selectedDate,
            datePicked:         datePicked,
            minDate:            new Date(Date.parse("1950-01-01T00:00:00.000Z")),
            maxDate:            new Date(Date.parse("2050-01-01T00:00:00.000Z")),
         };

    </JavaScript>

    <ClientPanel>

        <StackPanel Margin="20,20,20,20">
            <Text Value="Tap to open datepicker" />
            <Rectangle Height="32">
                <Stroke Width="1" Color="#CCCCCC" />
                <Text Dock="Left" TextAlignment="Center" Value="{datePicked}" FontSize="16" Margin="5,5,5,5">
                    <Tapped>
                        <Callback Handler="{toggleDatePicker}" />
                    </Tapped>
                </Text>
            </Rectangle>
        </StackPanel>

        <WhileTrue Value="{showDatePicker}">
            <Panel Layer="Overlay" Offset="0,0">
                <!-- This button allows to close the datepicker by tapping outside -->
                <Button Text="Close" Clicked="{toggleDatePicker}" />
                <NativeViewHost>
                    <DatePicker MinValue="{minDate}" MaxValue="{maxDate}" Value="{selectedDate}" Height="410" Width="90%" Background="#CCCCCC" Opacity="0.9" />
                </NativeViewHost>
            </Panel>
            <OnBackButton>
                <Callback Handler="{toggleDatePicker}" />
            </OnBackButton>
        </WhileTrue>

    </ClientPanel>

</App>
2

I was only able to select today’s date after selecting some other date. Try to select a different date then select today’s date.

3

Yes, that way works. Buy I would like that users may select today’s date without using this ‘trick’.

4

Any help or idea?

The practical problem is that as DatePicker opens it has today’s date already selected and it is not clickable. I guess that if DatePicker could be set to do not select the current date by default the problem would be solved.

5

Hello! I solved all my DatePicker issues by recreating the DatePicker from scratch as a DockPanel on top of other UI elements. You can make it in a day and it looks whatever you wish. :slightly_smiling_face:

6

Could be your date format, try use: moment().toDate();

7

@aeq. I’m using moment right now, but the issue is the same: as DatePicker opens it selects the current date (today) and that date is not clickable. It does not trigger.

@Matti. I do not have enought knowledge to create a datepicker from scratch. I could spend months on that.

8

This is actually a design or user experience(UX) issue; I went over the sample app and you should just let the user tap a separate “done” button in your modal/popup to choose the date or hit a cancel button to not change the date, you shouldn’t do it on the date value change event cos it technically didn’t change and this is just a bad user experience, what if I’m scrolling the dates thinking which day to choose, as soon as it lands on a date whilst I’m thinking about the date, it will choose the one it lands on and close the dialog, this is terrible UX.

9

Checkout these examples:

1 2 3

10

I shared this calendar and hope it helps you.

https://forums.fusetools.com/t/pretty-calendar/7680

11

@aeq. Yes right, I understand.

@Samuel. Thank you very much.