We Keep Coding

Open a modal from a button in another component Vue JS

I have 2 components. One called TestSearchTool and another one called TestModal. I'd like to show my Modal when I click a button in the TestSearchTool component. These 2 components are siblings in the hierarchy so I didn't really find a way to pass the value between them ( there is vuex but I'd like to find a way without it )
I'm using Bootstrap 5 and Vue 3 to do this since Bootstrap Vue doesn't work on Vue 3.
Here is my TestModal component :
<template>
<div>
<div class="modal fade" ref="exampleModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" #click="modal.hide()" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" #click="modal.hide()">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { Modal } from 'bootstrap'
export default {
name: "App",
data: () => ({
modal: null
}),
mounted() {
this.modal = new Modal(this.$refs.exampleModal)
}
};
</script>
Here is my TestSearchTool component :
<template>
<div>
<div class="container ml-5 mt-3 border-1 rounded pl-5 pt-5 pr-5">
<div class="row mb-4">
<div class="col-md-6 mb-4" >
<label for="test" class="label-form">Titre</label>
<input autocomplete="off" placeholder="Rechercher par le titre du test" v-model="testName" type="text" id="test" class="form-control">
</div>
<div class="col-md-6 mb-4">
<label for="candidat" class="label-form">Candidat</label>
<select v-model="CandidateName" class="form-select" id="candidat">
<option value="" selected>Tous les candidats</option>
</select>
</div>
</div>
<div class="row">
<div class="col-12 mb-3">
<div class="col-12 mb-4">
<div class="col-sm-6 col-12 d-inline-block">
<!-- Modal is shown on this button's click !-->
<button type="button" #click="this.$emit('clickDone')" class=" btn btn-primary col-12 col-sm-11 mb-sm-0 mb-sm-0 mb-4 float-sm-left"><i class="fa-solid fa-file-circle-plus"></i> Ajouter Un Test</button>
</div>
<div class="col-sm-6 col-12 d-inline-block">
<button #click="deleteTests" type="button" class=" btn btn-primary col-sm-12 col-12" v-if="false"><i class="fa-solid fa-file-circle-minus"></i> Supprimer Le(s) Test(s)</button>
</div>
</div>
<button id="searchTest" #click="searchBy" class="col-12 btn btn-primary" ><i class="fas fa-search"></i> Rechercher</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
components:{
},
data(){
return {
testName:'',
CandidateName:'',
show:false,
}
},
methods:{
},
}
</script>
<style scoped>
</style>
And here is the parent component (called Tests) :
<template>
<div>
<test-search-tool></test-search-tool>
<test-modal></test-modal>
</div>
</template>
<script>
import TestSearchTool from "../components/TestSearchTool.vue"
import TestModal from "../components/TestModal.vue"
export default {
components : {
DashboardNavbar,
TestSearchTool,
TestModal,
},
mounted(){
document.body.style.backgroundImage='url("")';
document.body.style.background="white";
}
}
</script>
<style>
</style>

As I know the goal of writing codes in components in simple words is to have special duties specific to that component. So when we define a "modal" component, we expect that it shows modal content for us. So in my opinion it is not correct to say modal component (here called TestModal.vue) and TestSearchTool.vue are siblings. You could use TestModal.vue every where in your app structure that you need a modal content to be shown. In other words the TestModal.vue component does not have any special content or logic to be the direct child of Tests.vue (the parent component).
With the above description I used TestModal.vue as child of TestSearchTool.vue and by using props and watch and emit capabilities of Vue, here is the codes of all 3 components:
TestSearchTool.vue:
<template>
<div>
<div class="container ml-5 mt-3 border-1 rounded pl-5 pt-5 pr-5">
<div class="row mb-4">
<div class="col-md-6 mb-4" >
<label for="test" class="label-form">Titre</label>
<input autocomplete="off" placeholder="Rechercher par le titre du test" v-model="testName" type="text" id="test" class="form-control">
</div>
<div class="col-md-6 mb-4">
<label for="candidat" class="label-form">Candidat</label>
<select v-model="CandidateName" class="form-select" id="candidat">
<option value="" selected>Tous les candidats</option>
</select>
</div>
</div>
<div class="row">
<div class="col-12 mb-3">
<div class="col-12 mb-4">
<div class="col-sm-6 col-12 d-inline-block">
<!-- Modal is shown on this button's click !-->
<button type="button" #click="this.$emit('clickDone')" class=" btn btn-primary col-12 col-sm-11 mb-sm-0 mb-sm-0 mb-4 float-sm-left"><i class="fa-solid fa-file-circle-plus"></i> Ajouter Un Test</button>
</div>
<div class="col-sm-6 col-12 d-inline-block">
<button #click="deleteTests" type="button" class=" btn btn-primary col-sm-12 col-12" v-if="false"><i class="fa-solid fa-file-circle-minus"></i> Supprimer Le(s) Test(s)</button>
</div>
</div>
<!-- *********************** -->
<!-- this button is responsible for showing modal. you can use such a button in other parts of your app if you define "data" correctly -->
<button id="searchTest" #click="dataModal = true" class="col-12 btn btn-primary" ><i class="fas fa-search"></i> Rechercher</button>
</div>
<test-modal #closeModal="dataModal = false" :showModal="dataModal"></test-modal>
<!-- *********************** -->
</div>
</div>
</div>
</template>
<script>
import TestModal from "../components/TestModal.vue"
export default {
name: "TestSearchTool",
components:{
TestModal
},
data(){
return {
testName:'',
CandidateName:'',
show:false,
/* this data is used for showing modal */
dataModal: false
}
}
}
</script>
<style scoped>
</style>
TestModal.vue:
<template>
<div>
<div id="myModal" class="modal fade" ref="exampleModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" #click="hideModal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" #click="hideModal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { Modal } from 'bootstrap'
export default {
name: "TestModal",
data: () => ({
modalInstance: null
}),
props: {
showModal: {
type: Boolean,
default: false
}
},
watch: {
showModal(newValue, oldValue) {
console.log(newValue);
if (newValue === true) {
this.modalActive();
}
}
},
methods: {
modalActive: function () {
this.modalInstance = new Modal(document.getElementById('myModal'), {
target: "#my-modal",
backdrop: "static"
});
this.modalInstance.show()
},
hideModal: function () {
console.log("closed");
this.modalInstance.hide();
this.$emit('closeModal');
}
}
};
</script>
<style scoped>
</style>
Tests.vue:
<template>
<div>
<test-search-tool></test-search-tool>
</div>
</template>
<script>
import TestSearchTool from "../components/TestSearchTool.vue"
export default {
name: "Tests",
components : {
TestSearchTool
}
}
</script>
<style scoped>
</style>

jquery chosen update not working after ajax response

I have some issue with jquery chosen (ver 1.5.1). In my laravel project I have view with modal. In view is select with alreay some list. User using modal with form, can add position to the table from which I wanna update select list and update chosen. My code:
View:
<div class="form-group row">
<label class="col-3 text-right" for="car">Klient: (Add car)</label>
<div class="col-9">
{!! Form::select('cari', $car, null, ['class'=>'form-control form-control-sm form-control-chosen', 'id' => 'client', 'placeholder' => 'Chose car']) !!}
{!! $errors->first('cari', '<strong><p style="color:red;" class="help-block">:message</p></strong>') !!}
<script type="text/javascript">
$("#client").chosen({
no_results_text: 'Missing sorry.',
});
</script>
</div>
</div>
<div class="modal fade bd-example-modal-lg" id="myModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">add new car:</h4>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col response-client">
</div>
</div>
#csrf
<div class="form-group {{ $errors->has('car') ? 'has-error' : ''}}">
<label for="exampleFormControlFile1">car danem: </label>
<input class="form-control form-control-sm" name="car" type="text" id="newcar">
{!! $errors->first('car', '<strong><p style="color:red;" class="help-block">:message</p></strong>') !!}
</div>
</div>
<button type="submit" id="add-car" class="btn btn-primary btn-sm">{{ __('save') }}<i class="icon-floppy"></i></button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
script code
$('#add-car').click(function(){
var car = $('#newcar').val();
$.ajax({
url:"{{ url('cars/carNew') }}",
method:"POST",
data:{car:car, _token:"{{ csrf_token() }}"},
success:function(result)
{
if(result.result > 0)
{
NewCar();
}
else
{
$("#msg").html("Error can't add new car!");
$("#msg").fadeOut(2000);
}
},
error:function(xhr)
{
console.log(xhr.responseText);
}
})
});
function NewCar()
{
$('#myModal').modal('hide');
$('.modal-backdrop').remove();
$('#client').empty();
$.ajax({
url:"{{ url('umowy/klienci') }}",
method:"POST",
data:{ _token:"{{ csrf_token() }}"},
success:function(result)
{
$("#client").append('<option>Chose car</option>');
if(result)
{
$.each(result,function(key,value){
$('#client').append($("<option/>", {
value: key,
text: value
}));
});
}
$('#client').trigger('chosen:updated');
},
error:function(xhr)
{
console.log(xhr.responseText);
}
});
}
});
Everything works very well except that $('#client').trigger('chosen:updated');. Nothing happen no errors. I'm not sure if I'm doing everything right? Sorry for my english.

Delete Firebase document on bootstrap modal confirmation button

I need some advise on how to go about editing user by document ID from the firebase database.
After user clicks the icon it will bring up bootstrap modal and I need to update user information.
On edit button click, it takes you to the editUser Function passing the user information to the function to be used. This function fires up a bootstrap modal to make the changes and then it should save the information back to the database.
It does not applies the changes when user has updates information.
<template>
<div id="app">
<div>
<div class="container-fluid">
<div class="row bg-dark">
<div class="col-lg-12">
<p class="text-center text-light display-4 pt-2" style="font-size: 25px">CRUD Application Using Vue.js</p>
</div>
</div>
</div>
<div class="container">
<div class="row mt-3">
<div class="col-lg-6 ">
<h3 class="text-info mt-0 float-left">Registered Users</h3>
</div>
<div class="col-lg-6">
<button class="btn btn-info float-right" #click="showAddModal=true">
<i class="fa fa-user"></i> Add New User
</button>
</div>
</div>
<hr class="bg-info">
<div v-if="errorMsg" class="alert alert-danger">Error Message</div>
<div v-if="successMsg" class="alert alert-success">Success Message</div>
<!--Display Records-->
<div class="row">
<div class="col-lg-12">
<table class="table table-bordered table-striped">
<thead>
<tr class="text-center bg-info text-light">
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr v-for="(user, idx) in users" :key="idx" class="text-center">
<td>{{ idx + 1 }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>{{ user.phone }}</td>
<td><a class="text-success" href="#" #click="editUser(user)"><i class="fa fa-edit"></i></a></td>
<td><a class="text-danger" href="#" #click="showDeleteModal=true"><i class="fa fa-trash"></i></a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!--Add New User Model-->
<div v-if="showAddModal" id="add" class="overlay">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add New User</h5>
<button class="close" type="button" #click="showAddModal=false">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body p-4">
<form action="#" method="post">
<div class="form-group">
<input v-model="user.name" class="form-control form-control-lg" name="name" placeholder="Name"
type="text">
</div>
<div class="form-group">
<input v-model="user.email" class="form-control form-control-lg" name="email" placeholder="Email"
type="email">
</div>
<div class="form-group">
<input v-model="user.phone" class="form-control form-control-lg" name="phone" placeholder="Phone"
type="tel">
</div>
<div class="form-group">
<button class="btn btn-info btn-block btn-lg"
#click="showAddModal=false; saveNewUser(); successMsg=true">Add User
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!--Edit User Model-->
<div v-if="showEditModal" id="edit" class="overlay" tabindex="-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Update User</h5>
<button aria-label="Close" class="close" data-dismiss="modal" type="button" #click="showEditModal=false">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body p-4">
<form action="#" method="post">
<div class="form-group">
<input v-model="user.name" class="form-control form-control-lg" name="name" placeholder="Name"
type="text">
</div>
<div class="form-group">
<input v-model="user.email" class="form-control form-control-lg" name="email" placeholder="Email"
type="email">
</div>
<div class="form-group">
<input v-model="user.phone" class="form-control form-control-lg" name="phone" placeholder="Phone"
type="tel">
</div>
<div class="form-group">
<button class="btn btn-info btn-block btn-lg" #click="showAddModal=false; updateUser()">Update User
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!--Delete User Model-->
<div v-if="showDeleteModal" id="delete" class="overlay">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Delete User</h5>
<button class="close" type="button" #click="showDeleteModal=false">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body p-4">
<h4 class="text-danger">Are you sure you want to delete this user?</h4>
<h5>You are Deleting 'Kevin'</h5>
<hr>
<button class="btn btn-danger btn-lg" #click="showDeleteModal=false">Yes</button>
<button class="btn btn-success btn-lg" #click="showDeleteModal=false">no</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {db} from './firebase'
export default {
name: 'App',
data() {
return {
errorMsg: false,
successMsg: false,
showAddModal: false,
showEditModal: false,
showDeleteModal: false,
users: [],
currentUser: null,
user: {
userID: null,
name: null,
email: null,
phone: null
}
}
},
methods: {
// Displays all users stores in firebase
displayAllUsers() {
db.collection("patients").get().then((querySnapshot) => {
querySnapshot.forEach((doc) => {
this.users.push(doc.data());
});
});
},
// Creates New User with an auto generated Document
saveNewUser() {
db.collection("patients").add(this.user)
.then((docRef) => {
console.log("Document written with ID: ", docRef.id);
this.displayAllUsers();
})
.catch(function (error) {
console.error("Error adding document: ", error);
});
},
// Edit User
editUser(user) {
this.showEditModal = true;
this.user = user.data();
this.currentUser = user.id;
},
// Update User
updateUser() {
db.collection("patients").doc(this.currentUser).update(this.user)
.then(function () {
console.log("Document successfully updated!");
})
.catch(function (error) {
// The document probably doesn't exist.
console.error("Error updating document: ", error);
});
},
// Delete User
deleteUser(doc) {
db.collection("patients").doc(doc).delete().then(function () {
console.log("Document successfully deleted!");
}).catch(function (error) {
console.error("Error removing document: ", error);
});
},
// Reset the data from the input field to null
reset() {
// Object.assign(this.$data, this.$options.data.apply((this)));
}
},
created() {
this.displayAllUsers();
}
}
</script>

I want to show Modal popup and pass data to modal according to user-id in Laravel Blade

I want to show a popup modal with information for an individual user when someone clicks on view Details Button.
I want to pass the user data according to the user-id and show this in the modal popup. My data are in $user.
I want to do exactly done in the link below website http://ssipgujarat.in/sgh201920/problem_statement.php as you click on view details, it shows the modal for that particular problem statement. I hope that it make sense to you.
#extends('layouts.app')
#section('content')
<div class="container" id="blur-wrapper">
<div class="row">
#foreach($data as $user)
#if($user->user_type == 'user')
<div class="col-md-6 col-sm-12">
<div class="card-wrapper">
<div class="info-wrapper">
<h2>{{ $user->first_name }} {{ $user->last_name }}</h2>
<h6>{{ $user->email }}</h6>
<hr/>
<h6>Department: {{$user->StudentProfile->department}}</h6>
<h6>Sem: {{ $user->StudentProfile->sem }}</h6>
</div>
<div class="button-wrapper">
<form action="{{ $user->id }}">
{{-- <button class="btn btn-primary" id="view-detail">View Details</button>--}}
<a class="btn btn-info" id="view-detail" href="{{ $user->id }}">View Details</a>
</form>
<form method="POST" action="/admin/reject/{{ $user->id }}">
#csrf
<button class="btn btn-danger" type="submit">Delete Account</button>
</form>
</div>
</div>
<div class="popup">
<h2>{{ }}</h2>
</div>
</div>
#endif
#endforeach
</div>
</div>
#endsection

On your view details button assuming you are using bootstrap,your code should
<input type="button" class="button_edit" data-toggle="modal" data-target="#exampleModal{{$user->id}}" value="Edit"/>
on your routes
on your modal's code
#foreach($users as $user)
<div class="modal fade" id="exampleModal{{$user->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">
Edit Brand
</h5>`enter code here`
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="col-md-offset-2">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" class="form-control" value="{{$user->first_name}}">
</div>
<input type="submit" value="Edit" class="btn btn-success">
</div>
</div>
</div>
</div>
</div>
#endforeach

Did this with jQuery and Ajax and a data-entry attribute:
blade (CSS: bulma)
<!-- list of elements -->
<li class="dashboard">
<p class="img-hover-dashboard-info showQuickInfo" data-entry="{{ $highlight->id }}"></p>
</li>
<!-- MODAL -->
<div class="modal" id="QuickInfo">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Quick-Info</p>
<button class="delete closeQuickInfo" aria-label="close"></button>
</header>
<section class="modal-card-body">
<!-- PUT INFORMATION HERE, for example: -->
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Rubrik</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input class="input" id="category" type="text" value="" readonly>
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Kunde</label>
</div>
<div class="field-body">
<div class="field">
<input class="input" id="customer" type="text" value="" readonly>
</div>
</div>
</div>
<!-- END PUT INFORMATION HERE -->
</section>
<footer class="modal-card-foot">
<button class="button is-link closeQuickInfo">Schließen</button>
</footer>
</div>
</div>
jQuery
$(document).ready(function () {
$('.showQuickInfo').click(function () {
$('#QuickInfo').toggleClass('is-active'); // MODAL
var $entry = this.getAttribute('data-entry');
getEntryData($entry);
});
}
function getEntryData(entryId) {
$.ajax({
url: '/entries/getEntryDataForAjax/' + entryId,
type: 'get',
dataType: 'json',
success: function (response) {
if (response.length == 0) {
console.log( "Datensatz-ID nicht gefunden.");
} else {
// set values
$('#category').val( response[0].category );
$('#customer').val( response[0].customer );
// and so on
}
}
});
}
Controller
public function getEntryDataForAjax(int $id)
{
$entries = new Entry();
$entry = $entries->where('id', $id)->get();
echo json_encode($entry);
}

Date Not specifically working in laravel

I am now doing a project. In this project I am stuck in date.I have a problem in my project. In my project the user can add , edit or update his experience. For which I need date. The User can add his work experience from date to to date. But in this I can't select the previous date. I can only select from today to future day but can't select the previous date. I don't understand where the problem is.
My Code is given below
<h3 class="margin-bottom-20">Work Experience</h3>
<h4>Please list experience in chronological order, with most recent experience first.</h4><br>
<div class="margin-bottom-30">
<a href="#" data-toggle="modal" data-target="#addWorkExperience"
class="btn color-2 size-2 hover-1"><i class="fa fa-plus"></i> Add Work
Experience</a>
<div class="resume">
#if (isset($user_work_experiences))
#foreach ($user_work_experiences as $user_work_experience)
<div class="resume-list">
<div class="meta-header">
<p>{{ (!empty($user_work_experience->from_date)) ? $user_work_experience->from_date : '' }}
<i>to</i> {{ $user_work_experience->to_date }}</p>
</div>
</div>
#endforeach
#endif
</div>
</div>
After clicking the button this will work
<div class="modal fade" id="addWorkExperience" tabindex="-1" role="dialog" aria-labelledby="addExperience">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Add Experience</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<div class="form-group focus-2">
<div class="form-label">From Date</div>
<input class="form-input datepicker" id="job_from_date" onblur="job_from_date()" onkeypress="job_from_date()" name="job_from_date" type="text" value="" placeholder="MM/DD/YYYY">
<label id="error_job_from_date" style="color:red"></label>
</div>
</div>
<div class="col-md-6">
<div class="form-group focus-2">
<div class="form-label">To Date</div>
<input class="form-input datepicker" id="job_to_date" onblur="job_to_date()" onkeypress="job_to_date()" name="job_to_date" type="text" value=""
placeholder="MM/DD/YYYY">
<div class="be-checkbox">
<label class="check-box">
<input type="checkbox" name="job_current_date" id="job_current_date" onblur="job_current_date()" onkeypress="job_current_date()" value="{{ \Carbon\Carbon::now()->format('m/d/Y') }}" class="checkbox-input">
<span class="check-box-sign"></span>
</label>
<span class="large-popup-text"> Currently Work Here </span>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-lg btn-default" data-dismiss="modal">
Close
</button>
<button type="button" onclick="add_job_experience()"
class="be-popup-sign-button">Add Experience
</button>
</div>
</div>
</div>
</div>
My Javascript code is
function add_job_experience() {
if (job_title() && company_name() && job_from_date() && (job_to_date() || job_current_date()) && job_description()) {
$.ajax(
{
type: 'POST',
url: '{{ URL::to('profile/edit/work/experience') }}',
data: {
'job_title': document.getElementById('job_title').value,
'company_name': document.getElementById('company_name').value,
'from_date': document.getElementById('job_from_date').value,
'to_date': document.getElementById('job_to_date').value,
'current_date': document.getElementById('job_current_date').value,
'description': document.getElementById('job_description').value
},
cache: false,
success: function (result) {
if (result == 1) {
alert('work experience add successful');
window.location.reload();
} else {
alert(result);
}
}
}
)
} else {
}
}
Please help me solving this.

This is simply done by adding this in javascript
jQuery('.datepicker').datetimepicker({
timepicker:false,
format:'m-d-Y'
});