Datepicker change format ufter updating - datepicker

Question

I am using the bootstrap datepicker in my view and every time I call the update method, the date sets fine but the date picker suddenly reverts from dd/mm/yyyy format to mm/dd/yyyy format.
Controller
public function actionDias(){
Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
if (isset($_POST['anio']) and isset($_POST['cuatrimestre'])) {
$cuatrimestre = $_POST['cuatrimestre'];
$anio = $_POST['anio'];
$fechaMin = CampusActividadDia::find()->where(['cuatrimestre' => $cuatrimestre])->andWhere(['anio' => $anio])->min('fecha');
$fecha_desde = date("d/m/Y", strtotime($fechaMin));
$fechaMax = CampusActividadDia::find()->where(['cuatrimestre' => $cuatrimestre])->andWhere(['anio' => $anio])->max('fecha');
$fecha_hasta = date("d/m/Y", strtotime($fechaMax));
return ([
'fecha_desde' => $fecha_desde,
'fecha_hasta' => $fecha_hasta
]);
} else return null;
}
View
<div id="dias" class="form-group hidden">
<label class="control-label">Rango de Fechas:</label>
<?php
echo DatePicker::widget([
'model' => $model,
'attribute' => 'fecha_desde',
'attribute2' => 'fecha_hasta',
'options' => ['id'=>'fecha_desde','disabled' => ($model->fecha_desde == "")],
'options2' => ['id'=>'fecha_hasta','disabled' => ($model->fecha_desde == "")],
'type' => DatePicker::TYPE_RANGE,
'separator' => 'hasta',
'pluginOptions' => [
'autoclose' => true,
'format' => 'dd/mm/yyyy'
]
]); ?>
</div>
Js
$.ajax({
url: URL_BASE + "/campus/dias",
type: "post",
dataType: "json",
data: {
cuatrimestre: this.value,
anio: $('#anio').val()
},
success: function (res) {
const fecha_desde = res.fecha_desde;
const fecha_hasta = res.fecha_hasta
$(fechaDesdeRef).kvDatepicker('update',new Date(fecha_desde));
$(fechaHastaRef).kvDatepicker('update', new Date(fecha_hasta));
$(fechaDesdeRef).prop('disabled', false);
$(fechaHastaRef).prop('disabled', false);
},
error: function (xhr, ajaxOptions, thrownError) {
alert("ERROR " + xhr.status);
},
});
I've also tried to change date format both ways setting the global default format and locally but without success, like the following:
$.fn.kvDatepicker.defaults.format = 'dd/mm/yyyy'
$(datePickerRef).kvDatepicker({
formatDate: 'd/m/Y',
date:'d/m/Y'
})
I've also read this issue, but there isn't a conclution about it:
https://github.com/uxsolutions/bootstrap-datepicker/issues/1775

Answer 1

Sounds like that your DatePicker is overwriting pluginOptions when model is loaded. Might need to config DatePicker or overwrite it to stop missing format

Answer 2

config/main.php
'modules' => [
'datecontrol' => [
'class' => 'kartik\datecontrol\Module',
'displaySettings' => [
'date' => 'php:d-M-Y',
'time' => 'php:H:i:s A',
'datetime' => 'php:d-m-Y H:i:s A',
],
'saveSettings' => [
'date' => 'php:Y-m-d',
'time' => 'php:H:i:s',
'datetime' => 'php:Y-m-d H:i:s',
],
// automatically use kartikwidgets for each of the above formats
'autoWidget' => true,
],
],
'components' => [
//http://webtips.krajee.com/override-bootstrap-css-js-yii-2-0-widgets/
'assetManager' => [
'bundles' => [
'yii\bootstrap4\BootstrapAsset' => [
'sourcePath' => '#npm/bootstrap/dist'
],
'yii\bootstrap4\BootstrapPluginAsset' => [
'sourcePath' => '#npm/bootstrap/dist'
],
'#frontend\modules\invoice\assets\CoreCustomCssJsAsset'=>[
'sourcePath' => '#frontend/modules/invoice/assets'
],
],
composer.json
"require": {
"php": ">=7.4.9",
"guzzlehttp/guzzle":"*",
"yiisoft/yii2": "~2.0.41.1",
"yiisoft/yii2-bootstrap": "~2.0.9",
"yiisoft/yii2-bootstrap4": "^2.0.8",
"bower-asset/bootstrap": "~3.4.1",
"bower-asset/ladda": "*",
"bower-asset/font-awesome": "~4.7.0.0",
"npm-asset/jquery": "^2.2",
"vlucas/phpdotenv": "*",
"insolita/yii2-migration-generator": "~3.1",
"ifsnop/mysqldump-php": "*",
"warrence/yii2-kartikgii": "dev-master",
"kartik-v/yii2-bootstrap4-dropdown": "#dev",
"kartik-v/bootstrap-fileinput": "dev-master",
"kartik-v/yii2-editable": "#dev",
"kartik-v/yii2-grid":"#dev",
"kartik-v/yii2-widget-timepicker": "#dev",
"kartik-v/yii2-date-range": "*",
"kartik-v/yii2-social": "#dev",
"kartik-v/yii2-dynagrid": "dev-master",
"kartik-v/yii2-tree-manager": "#dev",
"kartik-v/yii2-mpdf":"dev-master",
"kartik-v/bootstrap-star-rating": "#dev",
"kartik-v/yii2-slider": "dev-master",
"kartik-v/yii2-number" : "#dev",
"kartik-v/yii2-editors": "#dev",
"kartik-v/yii2-validators": "dev-master",
},
"require-dev": {
"yiisoft/yii2-debug": "~2.1.0",
"yiisoft/yii2-gii": "~2.1.0",
"yiisoft/yii2-faker": "~2.0.0",
"codeception/codeception": "^4.0",
"codeception/verify": "~0.5.0 || ~1.1.0"
},
"config": {
"process-timeout": 1800
},
"fxp-asset": {
"installer-paths": {
"npm-asset-library": "vendor/npm-asset",
"bower-asset-library": "vendor/bower-asset"
}
},
These settings have worked for me. You might considering modifying your AppAsset.php as follows to incorporate bootstrap 4.
<?php
namespace frontend\assets;
use yii\web\AssetBundle;
use yii\bootstrap4\BootstrapAsset;
use yii\web\YiiAsset;
use yii\web\JqueryAsset;
/**
* Main frontend application asset bundle.
*/
class AppAsset extends AssetBundle
{
public $sourcePath = '#app/assets/app';
public $baseUrl = '#app';
public $css = [
'css/site.css',
'//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css',
'//use.fontawesome.com/releases/v5.3.1/css/all.css',
'//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css'
];
public $js = [
'//kit.fontawesome.com/85ba10e8d4.js',
];
public $depends = [
BootstrapAsset::class,
YiiAsset::class,
JqueryAsset::class,
];
}