Convert tag as a Date picker

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

This is my GUI view in html enter image description here and my html code is

 <div class="row">

                <div class="col-md-5" style="    padding: 35px;">

                    <span style="font-size: 16px;">From</span>

                    <p style="padding-left: 20px;padding-top: 15px;">

                        <i class="fa fa-calendar" style="font-size:30px">

                            <input type="date" dataformatas=""/>

                            <span class="muve-span-date"><?php echo date('Y-m-01'); ?></span>

                        </i>

                    </p>

                </div>

                <div style="margin-top: 40px;" class="col-md-1">

                    <div class="vl"></div>

                </div>

                <div class="col-md-5" style="padding: 35px;">

                    <span style="font-size: 16px;">To</span>

                    <p style="padding-left: 20px;padding-top: 15px;">

                        <i class="fa fa-calendar" style="font-size:30px">

                            <span class="muve-span-date"><?php echo date("Y-m-d"); ?></span>

                        </i>

                    </p>

                </div>

            </div>

. how can i convert this span tag as a date picker.

Thanks,
Buddhika.

edited Nov 23 '18 at 7:02

asked Nov 23 '18 at 6:27

Buddhika Lakshan

12719

@BuddhikaLakshan Can you elaborate your question.

– Husna
Nov 23 '18 at 7:08

@buddhika-lakshan can you also mark answers as correct or comment on why they are not good enough?

– cloned
Nov 26 '18 at 11:30

add a comment |

This is my GUI view in html enter image description here and my html code is

 <div class="row">

                <div class="col-md-5" style="    padding: 35px;">

                    <span style="font-size: 16px;">From</span>

                    <p style="padding-left: 20px;padding-top: 15px;">

                        <i class="fa fa-calendar" style="font-size:30px">

                            <input type="date" dataformatas=""/>

                            <span class="muve-span-date"><?php echo date('Y-m-01'); ?></span>

                        </i>

                    </p>

                </div>

                <div style="margin-top: 40px;" class="col-md-1">

                    <div class="vl"></div>

                </div>

                <div class="col-md-5" style="padding: 35px;">

                    <span style="font-size: 16px;">To</span>

                    <p style="padding-left: 20px;padding-top: 15px;">

                        <i class="fa fa-calendar" style="font-size:30px">

                            <span class="muve-span-date"><?php echo date("Y-m-d"); ?></span>

                        </i>

                    </p>

                </div>

            </div>

. how can i convert this span tag as a date picker.

Thanks,
Buddhika.

edited Nov 23 '18 at 7:02

asked Nov 23 '18 at 6:27

Buddhika Lakshan

12719

@BuddhikaLakshan Can you elaborate your question.

– Husna
Nov 23 '18 at 7:08

@buddhika-lakshan can you also mark answers as correct or comment on why they are not good enough?

– cloned
Nov 26 '18 at 11:30

add a comment |

This is my GUI view in html enter image description here and my html code is

 <div class="row">

                <div class="col-md-5" style="    padding: 35px;">

                    <span style="font-size: 16px;">From</span>

                    <p style="padding-left: 20px;padding-top: 15px;">

                        <i class="fa fa-calendar" style="font-size:30px">

                            <input type="date" dataformatas=""/>

                            <span class="muve-span-date"><?php echo date('Y-m-01'); ?></span>

                        </i>

                    </p>

                </div>

                <div style="margin-top: 40px;" class="col-md-1">

                    <div class="vl"></div>

                </div>

                <div class="col-md-5" style="padding: 35px;">

                    <span style="font-size: 16px;">To</span>

                    <p style="padding-left: 20px;padding-top: 15px;">

                        <i class="fa fa-calendar" style="font-size:30px">

                            <span class="muve-span-date"><?php echo date("Y-m-d"); ?></span>

                        </i>

                    </p>

                </div>

            </div>

. how can i convert this span tag as a date picker.

Thanks,
Buddhika.

edited Nov 23 '18 at 7:02

asked Nov 23 '18 at 6:27

Buddhika Lakshan

12719

This is my GUI view in html enter image description here and my html code is

 <div class="row">

                <div class="col-md-5" style="    padding: 35px;">

                    <span style="font-size: 16px;">From</span>

                    <p style="padding-left: 20px;padding-top: 15px;">

                        <i class="fa fa-calendar" style="font-size:30px">

                            <input type="date" dataformatas=""/>

                            <span class="muve-span-date"><?php echo date('Y-m-01'); ?></span>

                        </i>

                    </p>

                </div>

                <div style="margin-top: 40px;" class="col-md-1">

                    <div class="vl"></div>

                </div>

                <div class="col-md-5" style="padding: 35px;">

                    <span style="font-size: 16px;">To</span>

                    <p style="padding-left: 20px;padding-top: 15px;">

                        <i class="fa fa-calendar" style="font-size:30px">

                            <span class="muve-span-date"><?php echo date("Y-m-d"); ?></span>

                        </i>

                    </p>

                </div>

            </div>

. how can i convert this span tag as a date picker.

Thanks,
Buddhika.

 <div class="row">

                <div class="col-md-5" style="    padding: 35px;">

                    <span style="font-size: 16px;">From</span>

                    <p style="padding-left: 20px;padding-top: 15px;">

                        <i class="fa fa-calendar" style="font-size:30px">

                            <input type="date" dataformatas=""/>

                            <span class="muve-span-date"><?php echo date('Y-m-01'); ?></span>

                        </i>

                    </p>

                </div>

                <div style="margin-top: 40px;" class="col-md-1">

                    <div class="vl"></div>

                </div>

                <div class="col-md-5" style="padding: 35px;">

                    <span style="font-size: 16px;">To</span>

                    <p style="padding-left: 20px;padding-top: 15px;">

                        <i class="fa fa-calendar" style="font-size:30px">

                            <span class="muve-span-date"><?php echo date("Y-m-d"); ?></span>

                        </i>

                    </p>

                </div>

            </div>

 <div class="row">

                <div class="col-md-5" style="    padding: 35px;">

                    <span style="font-size: 16px;">From</span>

                    <p style="padding-left: 20px;padding-top: 15px;">

                        <i class="fa fa-calendar" style="font-size:30px">

                            <input type="date" dataformatas=""/>

                            <span class="muve-span-date"><?php echo date('Y-m-01'); ?></span>

                        </i>

                    </p>

                </div>

                <div style="margin-top: 40px;" class="col-md-1">

                    <div class="vl"></div>

                </div>

                <div class="col-md-5" style="padding: 35px;">

                    <span style="font-size: 16px;">To</span>

                    <p style="padding-left: 20px;padding-top: 15px;">

                        <i class="fa fa-calendar" style="font-size:30px">

                            <span class="muve-span-date"><?php echo date("Y-m-d"); ?></span>

                        </i>

                    </p>

                </div>

            </div>

html css html5 css3 bootstrap-4

edited Nov 23 '18 at 7:02

asked Nov 23 '18 at 6:27

Buddhika Lakshan

12719

edited Nov 23 '18 at 7:02

asked Nov 23 '18 at 6:27

Buddhika Lakshan

12719

edited Nov 23 '18 at 7:02

asked Nov 23 '18 at 6:27

Buddhika Lakshan

12719

asked Nov 23 '18 at 6:27

Buddhika Lakshan

12719

asked Nov 23 '18 at 6:27

Buddhika Lakshan

12719

@BuddhikaLakshan Can you elaborate your question.

– Husna
Nov 23 '18 at 7:08

@buddhika-lakshan can you also mark answers as correct or comment on why they are not good enough?

– cloned
Nov 26 '18 at 11:30

add a comment |

@BuddhikaLakshan Can you elaborate your question.

– Husna
Nov 23 '18 at 7:08

@buddhika-lakshan can you also mark answers as correct or comment on why they are not good enough?

– cloned
Nov 26 '18 at 11:30

@BuddhikaLakshan Can you elaborate your question.

– Husna
Nov 23 '18 at 7:08

@buddhika-lakshan can you also mark answers as correct or comment on why they are not good enough?

– cloned
Nov 26 '18 at 11:30

add a comment |

1 Answer
1

active

oldest

votes

You would have to implement a datepicker instead of a span.

Easiest way would be to just use <input type="date"> and let the browser handle this for you. Downside of this is that you can't really style this input.

Second option is to use a javascript library that takes care of rendering the datepicker, two popular choices are:

Bootstrap datepicker

jQuery UI Datepicker

This are only 2 options, if you search for javascript datepicker you will find a lot more, so feel free to chose a different one if you don't like the 2 mentioned above.

answered Nov 23 '18 at 7:15

cloned

66769

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53441580%2fconvert-span-tag-as-a-date-picker%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

You would have to implement a datepicker instead of a span.

Easiest way would be to just use <input type="date"> and let the browser handle this for you. Downside of this is that you can't really style this input.

Second option is to use a javascript library that takes care of rendering the datepicker, two popular choices are:

Bootstrap datepicker

jQuery UI Datepicker

This are only 2 options, if you search for javascript datepicker you will find a lot more, so feel free to chose a different one if you don't like the 2 mentioned above.

answered Nov 23 '18 at 7:15

cloned

66769

add a comment |

You would have to implement a datepicker instead of a span.

Easiest way would be to just use <input type="date"> and let the browser handle this for you. Downside of this is that you can't really style this input.

Second option is to use a javascript library that takes care of rendering the datepicker, two popular choices are:

Bootstrap datepicker

jQuery UI Datepicker

This are only 2 options, if you search for javascript datepicker you will find a lot more, so feel free to chose a different one if you don't like the 2 mentioned above.

answered Nov 23 '18 at 7:15

cloned

66769

add a comment |

You would have to implement a datepicker instead of a span.

Easiest way would be to just use <input type="date"> and let the browser handle this for you. Downside of this is that you can't really style this input.

Second option is to use a javascript library that takes care of rendering the datepicker, two popular choices are:

Bootstrap datepicker

jQuery UI Datepicker

This are only 2 options, if you search for javascript datepicker you will find a lot more, so feel free to chose a different one if you don't like the 2 mentioned above.

answered Nov 23 '18 at 7:15

cloned

66769

You would have to implement a datepicker instead of a span.

Easiest way would be to just use <input type="date"> and let the browser handle this for you. Downside of this is that you can't really style this input.

Second option is to use a javascript library that takes care of rendering the datepicker, two popular choices are:

Bootstrap datepicker

jQuery UI Datepicker

This are only 2 options, if you search for javascript datepicker you will find a lot more, so feel free to chose a different one if you don't like the 2 mentioned above.

answered Nov 23 '18 at 7:15

cloned

66769

answered Nov 23 '18 at 7:15

cloned

66769

answered Nov 23 '18 at 7:15

cloned

66769

answered Nov 23 '18 at 7:15

cloned

66769

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Cfrgtkky