Yii2 super easy-to-use date component and time component, yii2 super date component

Source: Internet
Author: User

Yii2 super easy-to-use date component and time component, yii2 super date component

The date component is indispensable in normal development. Today, let's talk about the super-useful time components in yii2, which saves you a lot of effort to find js plug-ins.

Before sharing, let's preview the effect and see how it works.
Of course, the poor performance lies in the feeling of self. You cannot see the picture above. The good news is that these two plug-ins have been integrated with yii2, which is also very simple to use.
For the date component and the time component, the former is of the date ('Y-m-d') type, and the latter is of the date ('Y-m-d H: I: s') type ') type. Needless to say.
Let's take a look at the time component extension.
Since it is an extension component, the first step is to install it.
composer require kartik-v/yii2-widget-datetimepicker "*"

After the installation, if your form is generated using ActiveForm, you can refer to the following code

use kartik\datetime\DateTimePicker; <?= $form->field($model, 'created_at')->widget(DateTimePicker::classname(), [  'options' => ['placeholder' => ''],  'pluginOptions' => [   'autoclose' => true,   'todayHighlight' => true,  ] ]); ?>

Some users who do not like to use ActiveForm to generate forms need to refer to the following usage.

Use kartik \ datetime \ DateTimePicker; echo '<label> time </label>'; echo DateTimePicker: widget (['name' => 'Article [created_at] ', 'options' => ['holder' => ''], // note, when updating this method, you must specify the value 'value' => '2017-05-03 22:10:10 ', 'ininoptions' => ['autoclose' => true, 'format' => 'yyyy-mm-dd HH: ii: ss', 'todayhighlight' => true]);

The convenience is self-evident.

The entire installation process is really simple. Next we will install the date component in the same way.

composer require kartik-v/yii2-widget-datepicker "@dev"

After the installation, we start to use the date component.

Use kartik \ date \ DatePicker; <? Php echo DatePicker: widget (['name' => 'Article [created_at] ', 'options' => ['placeholder' => '... '], // Add 'value' => '2017-05-03', 'ininoptions' => ['autoclose' => true, 'format' => 'yyyy-mm-dd', 'todayhighlight' => true,]);?>

After reading the above Code, you may have guessed the usage of the date component generated by ActiveForm. That's right. It's easy to use si.

<?= $form->field($model, 'created_at')->widget(DatePicker::classname(), [  'options' => ['placeholder' => ''],  'pluginOptions' => [   'autoclose' => true,   'todayHighlight' => true,   'format' => 'yyyy-mm-dd',  ] ]); ?>

Of course, the preceding time formats can be adjusted. However, since the date component is a date, only three types of parameters of ymd are supported. Otherwise, what is the difference with the time component.

Some friends say that they are in English, which is inconvenient to use. I would like to ask if your project is not configured in Chinese? You only need to add 'language '=> 'zh-cn' to your configuration file.

Finally, let's look at the final result.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.