yii2 datepicker disable dates using javascript - javascript

I rewrited my question:
I'm using Kartick DatePicker to display a datepicker. On this datepicker, I want to disable dates using javascript. Here is what I have:
<?= DatePicker::widget([
'name' => 'mydate',
'language' => 'fr',
'clientOptions' => [
'autoclose' => true,
'format' => 'dd-M-yyyy'
]
]);?>
With the JS:
$(function(){
$("#w0").datepicker("setDatesDisabled", ['25-08-2017']);
});
I tried to change the format of the date to 2017/08/25 or 08/25/2017 but in any case nothing is displayed into the logs.
I also tried to use kvDatepicker() instead of datepicker() but this gave me
Uncaught TypeError: $(...).kvDatepicker is not a function
Any clue on what is wrong here? Thank's.

Your date is in the wrong format. It should be specified as:
$("#w0").datepicker("setDatesDisabled", ['08/25/2017']);
Of course make sure that w0 is the correct ID for the input element... it might also be that your selector doesn't match the input.
I've verified on the demo page that entering this in the browser's console correctly disables Aug 28:
$('#sandbox-container input').datepicker("setDatesDisabled", ['08/28/2017']);

If you are using Yii2 Specifically than this may help you
echo '<label id = "for-trigger">Date</label>';
echo DatePicker::widget([
'type' => DatePicker::TYPE_INPUT,
'id' => 'anyUniqueID',
'name' => 'date',
'value' => '2020-04-11',
'options' => ['placeholder' => 'Selectdate ...'],
'pluginOptions' => [
'format' => 'yyyy-M-dd',
'daysOfWeekHighlighted' => '2,3',
'todayHighlight' => true,
'datesDisabled' => ['2020-04-06', '2020-04-21']
],
'pluginEvents' => [
'changeDate' => "function(e) {
//something you want to do may be
}"
]
]);

Related

All of Datepicker and Datecontrol is not working in activeForm Kartik

I have added datecontrol(kartik extension) in my activeForm of YII2, but it is not working.
It is shown in the activeForm, but when i click the cancel button and picker button, it has not any popup.
So I added the datecontrol and datepicker button to the out of activeForm
<?php
$form = ActiveForm::begin(
['type' => ActiveForm::TYPE_HORIZONTAL]);
echo Form::widget([
'model' => $model,
'form' => $form,
'columns' => 1,
'attributes' => [
'first_name' => ['type' => Form::INPUT_TEXT, 'options' => ['placeholder' => 'Enter First Name...', 'maxlength' => 255]],
// ............................
'created' => ['type' => Form::INPUT_WIDGET, 'widgetClass' => DateControl::classname(),'options' => [
'type' => DateControl::FORMAT_DATETIME],
'ajaxConversion'=>false,
],
]
]);?>
I tested adding datepicker to out of the activeform with this code.
echo DateTimePicker::widget([
'name' => 'dp_3',
'type' => DateTimePicker::TYPE_COMPONENT_APPEND,
'value' => '23-Feb-1982 12:35 AM',
'pluginOptions' => [
'autoclose'=>true,
'format' => 'dd-M-yyyy HH:ii P'
]
]);
But the same, is shown but not working.
I think there was many js files(maybe 2 or more) and datepicker.js file is not working because of the another one.
But didn't know how to fix that.
Can anyone help me?

Set a twig value with JS

I've seen many topics about questions like mine, but I can't get any solutions.
I'm using Symfony, and I have a twig template which displays a form.
Imagine that I have this line :
{{ form_row(demandeForm.distinction) }}
Thanks to this :
->add('distinction',null, [
'label_attr' => array('id' => "distinct_form"),
'required' => false,
'label' => 'distinction'
])
I also have a submit button. My wish is to modify the value of my row "distinction" when the button is clicked (id of the submit button : formDepot).
Here is my code :
$(document).ready(function(){
$('#formDepot').click(function(){
$('#distinct_form').value('555');
});
});
When I retrieve my datas on submit, I don't have any value in my "distinction".
Any ideas ?
Thanks
This is because you're applying the changes on the label value, not on the input itself.
'label_attr' => array('id' => "distinct_form") and in js : $('#distinct_form').val('555');
Change the form builder to this :
->add('distinction',
null,
[
'attr' => array('id' => "distinct_form"),
'required' => false,
'label' => 'distinction'
])
With attr for the field (not the label), you can try
$('#distinct_form').val('555'); not .value();
You are assigning a value, instead of getting the value, try this .....
$(document).ready(function(){
$('#formDepot').click(function(){
$('#distinct_form').val();
});

yii2 - How to set kartik select2 value in javascript

I try to set value to kartik select2 in javascript action but still no luck.
here is my code in view files:
<div class="col-xs-6">
<?= $form->field($model, 'item_id')->widget(kartik\select2\Select2::className(), [
'data' => \yii\helpers\ArrayHelper::map(\app\models\ItemProduction::find()->all(), 'id', 'name'),
'options' => ['placeholder' => 'Select item'],
'pluginOptions' => [
'allowClear' => true,
],
]) ?>
</div>
and my javascript code like this
$(document).on('click', '.select-row', function(){
// get id from custom button
var id = $(this).attr('data-id');
$.get('../ticket-timbangan/get-ticket', {id : id}, function(data){
var data = $.parseJSON(data);
alert(data.item_id);
$('#pengirimanproduksi-ticket_id').val(data.id);
$('#select2-pengirimanproduksi-item_id-container').val(data.item_id).trigger('change');
$('#pengirimanproduksi-bruto_tbg').val(data.bruto);
$('#pengirimanproduksi-tara_tbg').val(data.tara);
$('#pengirimanproduksi-remark').val(data.remark);
});
$('#modalTicketList').modal('hide');
});
this is I inspect kartik select2 element
<span class="select2-selection__rendered" id="select2-pengirimanproduksi-item_id-container"><span class="select2-selection__placeholder">Select item</span></span>
I try this code $('#select2-pengirimanproduksi-item_id-container').val(data.item_id).trigger('change'); but it changes nothing.
Please advice. thanks.
first id for select2 is wrong.
$('#select2-pengirimanproduksi-item_id-container')
don't confuse with this and use regular one according to your view name, like mine is $('#pengirimanproduksi-item_id').val(your_value).trigger('change') should work.
just reading select2 documentation.
you can give your own id:
'options' => ['placeholder' => 'Select item','id' => 'your_id'],

End Date should be greater than Start Date in Yii Bootstrap datepickerRow

I am using Yii bootstraps datepickerRow : Check this
I want my end_date depending on start_date. i.e. end_date should be greater than start date. I've spent couple of hours on google to check whether any in-built solution available for it but didn't found any solution. Then after I written my own js code which's I think perfectly fine but its not working.
I've already achieved this thing with Cjuidatepicker and its booming.
Check my working code for yii cjuidatepicker
But I don't know why its not working for yii bootstrap datepickerRow.
Any help would be appreciated.
Following is my code:
<?php
echo $form->datepickerRow(
$identitycard, 'date_of_issue', array(
'onChange' => 'setEndDate("passport_date_of_expiry", this)',
'class' => "input-small",
'labelOptions' => array('label' => 'Date of Issue <span class="required">*</span>'),
'value' => $passportArr['date_of_issue'],
'name' => 'passport[date_of_issue]',
'readonly' => true,
'options' => array(
'autoclose' => true,
'showAnim' => 'fold',
'format' => 'yyyy-mm-dd',
'endDate' => '-infinity'
),
'prepend' => '<i class="icon icon-calendar"></i>',
'hint' => 'yyyy-mm-dd'
)
);
echo $form->datepickerRow(
$identitycard, 'date_of_expiry', array(
'class' => "input-small",
'labelOptions' => array('label' => 'Date of Expiry <span class="required">*</span>'),
'value' => $passportArr['date_of_expiry'],
'name' => 'passport[date_of_expiry]',
'readonly' => true,
'options' => array(
'autoclose' => true,
'showAnim' => 'fold',
'format' => 'yyyy-mm-dd',
),
'prepend' => '<i class="icon icon-calendar"></i>',
'hint' => 'yyyy-mm-dd'
)
);
?>
// JS code
function setEndDate(id, date) {
var selectedDate = $(date).val();
$("#" + id).datepicker({
startDate: selectedDate,
format: "yyyy-mm-dd"
});
}
In your js function setEndDate, second parameter date is not jQuery element (this in your parameter in datepickerRow). It can't be read with jQuery selector.
In your function setEndDate you can read input value as date.value; instead $(date).val();
EDIT:
setEndDate function should work with this changes (refer to plugin docs related in source code of yiibooster, for example in my yii-booster installation : protected/components/bootstrap/assets/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js ):
function setEndDate(id, date) {
$("#" + id).val(date.value);
$("#" + id).datepicker('setStartDate' , date.value);
}

Get value of selectbox with JsHelper in CakePHP

I have a select box, and I want to use it to Ajax-update some other content on the page. So I have bound an event handler using the JsHelper (jQuery) like so:
<?php
echo $this->Form->select('car', $cars);
$this->Js->get("#car");
$this->Js->event('change', $this->Js->request(array(
'controller' => 'cars',
'action' => 'view',
???,
array('async' => true, 'update' => '#car-view', 'evalScripts' => true),
true
));
?>
But how can I get the value of the select box to send as an argument to the cars controller (at "???" in the code above)?
I could do everything in javascript, but is there any way to do this in cake?
To be honest, I struggled with this a while back. I couldn't find anything that worked, so I ended up just going the straight javascript route.
I think you are looking for this:
$this->Js->get('#selectbboxid1')->event('change',
$this->Js->request(array(
'action' => 'function'), array(
/*'before' => 'showLoader();',
'success' => 'hideLoader();',*/
'update' => '#selectboxid2',
'dataExpression'=>TRUE,
'method'=>'POST',
'async'=>TRUE,
'data' => $js->serializeForm(array('isForm' => TRUE, 'inline' => TRUE)) )));

Categories