Need DatePicker, this code is not working

Notice: This thread is very old.
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>
tpr
Member | 55
+
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`

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>
tpr
Member | 55
+
0
-

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

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

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">
tpr
Member | 55
+
0
-

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

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.

tpr
Member | 55
+
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)

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.

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">
tpr
Member | 55
+
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/

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);
tpr
Member | 55
+
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)

frocco
Member | 46
+
0
-

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

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?

tpr
Member | 55
+
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));
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)

tpr
Member | 55
+
0
-

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

frocco
Member | 46
+
0
-

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