Need DatePicker, this code is not working

frocco

Hello,

I downloaded the datepicker and installed, but it is not working for me.
no calendar pops up for input field.

public function createComponentAppointmentForm() {

        $form = new UI\Form;
        \Vodacek\Forms\Controls\DateInput::register();
    $form->addText('dob', 'Date of Birth:')

{control appointmentForm}

<script type="text/javascript" n:syntax="off">
$(document).ready(function() {
    $('input[data-dateinput-type]').dateinput({
        datetime: {
            dateFormat: 'd.m.yy',
            timeFormat: 'H:mm',
            options: { // options for type=datetime
                changeYear: true
            }
        },
        'datetime-local': {
            dateFormat: 'd.m.yy',
            timeFormat: 'H:mm'
        },
        date: {
            dateFormat: 'd.m.yy'
        },
        month: {
            dateFormat: 'MM yy'
        },
        week: {
            dateFormat: "w. 'week of' yy"
        },
        time: {
            timeFormat: 'H:mm'
        },
        options: { // global options
            closeText: "Close"
        }
    });
});
</script>

tpr

Just used this addon some weeks ago and worked fine.

Have you included all the required js files?

`www\js\jquery-ui-timepicker-addon.js
www\js\jquery-ui.min.js
www\js\jquery.ui.datepicker.js`

frocco

I have this

<link rel="stylesheet" type="text/css" href="/nette-massage/www/css/datepicker.css">
<script type='text/javascript' src="/nette-massage/www/js/dateInput.js"></script>

tpr

You should have more :) See the docs for the addon.

https://componette.org/search/?…

frocco

Thanks, I added lines below.
But still not working.
Do I have to change $(‘input[data-dateinput-type]’).dateinput({ to match each field?

<script type='text/javascript' src="/nette-massage/www/scripts/jquery-ui-timepicker-addon.js"></script>
<script type='text/javascript' src="/nette-massage/www/js/dateInput.js"></script>
<link rel="stylesheet" type="text/css" href="/nette-massage/www/styles/jquery-ui-timepicker-addon.css">
<link rel="stylesheet" type="text/css" href="/nette-massage/www/css/datepicker.css">

tpr

No, because that is generic. But you should include jquery (guess you have already) PLUS jquery-ui too. In short, RTFM :)

frocco

Sorry your losing patience with me.
I did not see any manual at https://componette.org/search/?…
I guess nette is not for me if I cannot ask questions.

tpr

Sorry, that was no offense. I thought the smiley made that clear :)

The addon page clearly says that you need to include several files you haven't (according what you wrote):

`JS dependencies

jQuery a jQueryUI
Timepicker addon version 1.1.0 or newer`

So you need

jQuery
jQuery UI
jquery-ui-timepicker-addon
dateInput.js

Plus the css files:

jquery-ui-timepicker-addon.css
dateInput.css

I agree that starting with Nette can be hard. In fact I'm also learning it, creating my second project.

Last edited by tpr (2015-03-28 20:07)

frocco

Thanks tpr for clarifying this.
Sorry I took your response the wrong way.

I am getting frustrated trying to get my site rewritten in nette.
I come from a Codeigniter background, so nette's approach is quite new to me.
I wish there were more english videos to watch.

frocco

Ok, I think I have everything loaded.
I have a field named dob.
How do I tell nette to use this datepicker?

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type='text/javascript' src="/nette-massage/www/scripts/jquery-ui/jquery-ui.js"></script>
<script type='text/javascript' src="/nette-massage/www/scripts/jquery-ui-timepicker-addon.js"></script>
<script type='text/javascript' src="/nette-massage/www/scripts/dateInput.js"></script>
<link rel="stylesheet" type="text/css" href="/nette-massage/www/styles/jquery-ui-timepicker-addon.css">
<link rel="stylesheet" type="text/css" href="/nette-massage/www/styles/dateInput.css">
<link rel="stylesheet" type="text/css" href="/nette-massage/www/scripts/jquery-ui/jquery-ui.css">

tpr

For example, add this to your form:

$form->addDate('date_booking', 'Booking date:', DateInput::TYPE_DATE);

Looks like the demo page is down, there were some examples (see the link in the right sidebar of the addon page):
http://date-input.vodacek.eu/

frocco

Getting error: Class ‘App\Presenters\DateInput’ not found
I installed via composer like the instructions said.

$form = new UI\Form;
    \Vodacek\Forms\Controls\DateInput::register();
    $form->addDate('date_booking', 'Booking date:', DateInput::TYPE_DATE);

tpr

You need to register DateInput in your bootstrap.php (as the addon page says), and not in your presenter.
Make sure to add the ::register line BEFORE the createContainer line.

If Nette doesn't find something it means you haven't told it where to find that.
Add DateInput to the “use” list (in the top of your presenter):

`use Nette,
App\Model,
// …
Vodacek\Forms\Controls\DateInput,
// Nette\Utils\DateTime,
// …
// Nette\Application\UI\Form;

Last edited by tpr (2015-03-28 21:12)

frocco

Thank you, will try it when I get home. I have about a week experience with nette. :)

frocco

tpr, thank you so much for helping me with this.
It is working great now.

Does nette have a Date Validation rule?

tpr

Glad you sorted it out.

Yes, you can use something like this:

$endDate = new DateTime('+1 years');
$endDate = $endDate->format('Y-m-d');

$form->addDate('date_booking', 'Foglalás dátuma:', DateInput::TYPE_DATE);
//    ...
//    ->addRule(Form::RANGE, 'Please add date between %d and %d', array($startDate, $endDate));

frocco

Thanks again,
Adding the rule causes this error.

 ->addRule($form::RANGE, 'Please add date between %d and %d', [$startDate, $endDate]);

Argument 1 passed to Vodacek\Forms\Controls\DateInput::normalizeDate() must be an instance of DateTime, string given, called in /Library/WebServer/Documents/nette-massage/vendor/voda/date-input/src/DateInput.php on line 138 and defined

I found out I need to remove the date->format function.

Last edited by frocco (2015-03-29 13:46)

tpr

Both $startDate and $endDate needs to be DateTime type, see my $endDate variable.

frocco

found out I need to remove the date->format function.