Need DatePicker, this code is not working

4 years ago

frocco
Member | 46
+
0
-

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>

4 years ago

tpr
Member | 56
+
0
-

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`

4 years ago

frocco
Member | 46
+
0
-

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>

4 years ago

tpr
Member | 56
+
0
-

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

https://addons.nette.org/voda/date-input

4 years ago

frocco
Member | 46
+
0
-

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">

4 years ago

tpr
Member | 56
+
0
-

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

4 years ago

frocco
Member | 46
+
0
-

Sorry your losing patience with me.
I did not see any manual at https://addons.nette.org/voda/date-input
I guess nette is not for me if I cannot ask questions.

4 years ago

tpr
Member | 56
+
0
-

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)

4 years ago

frocco
Member | 46
+
0
-

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.

4 years ago

frocco
Member | 46
+
0
-

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">

4 years ago

tpr
Member | 56
+
0
-

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/

4 years ago

frocco
Member | 46
+
0
-

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);

4 years ago

tpr
Member | 56
+
0
-

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)

4 years ago

frocco
Member | 46
+
0
-

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

4 years ago

frocco
Member | 46
+
0
-

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

Does nette have a Date Validation rule?

4 years ago

tpr
Member | 56
+
0
-

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));

4 years ago

frocco
Member | 46
+
0
-

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)

4 years ago

tpr
Member | 56
+
0
-

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

4 years ago

frocco
Member | 46
+
0
-

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