how to create date picker in asp content page

Question

This is my code now how to add date picker for select date month and year when user click on input then calender is came on the input for select date

Date

The .Net version is more about right-click project -> properties, namely the "Target Framework" property — Stefan Wuebbe, Jun 28 '22 at 11:03
Actually the question has already been answered https://stackoverflow.com/questions/1469280/asp-net-datetime-picker — Ben, Jun 29 '22 at 08:04

score 0 · Answer 1 · answered Jun 28 '22 at 11:09

Reference Bootstrap bootstrap-material-datetimepicker to your Project

and You Should Create html Input Element And using Tag-Helper connected to DataTime To Property

then add datepicker Attribute to the element

<input type="text" asp-for="StartDate" class="form-control" value="" datepicker >

Then add the following function to your project and call the InitDateTimePicker function

function InitDateTimePicker() {
var dateTimePicker = window.$("[datetimepicker]");
if (dateTimePicker.length > 0) {
    window.$('<link/>',
        {
            rel: 'stylesheet',
            type: 'text/css',
            href: '/' +
                direction +
                '/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css'
        }).appendTo('head');
    window.$.getScript("/" + direction + "/plugins/momentjs/moment.js",
        function (script, textStatus, jqXHR) {
            window.$.getScript(
                "/" +
                direction +
                "/plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js",
                function (script, textStatus, jqXHR) {
                    window.$(dateTimePicker).each(function (index, value) {
                        window.$(value).bootstrapMaterialDatePicker({
                            format: 'YYYY-MM-DD HH:mm',
                            clearButton: true,
                            weekStart: 1
                        });
                    });
                });
        });
}

var datePicker = window.$("[datepicker]");
if (datePicker.length > 0) {
    window.$('<link/>',
        {
            rel: 'stylesheet',
            type: 'text/css',
            href: '/' +
                direction +
                '/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css'
        }).appendTo('head');
    window.$.getScript("/" + direction + "/plugins/momentjs/moment.js",
        function (script, textStatus, jqXHR) {
            window.$.getScript(
                "/" +
                direction +
                "/plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js",
                function (script, textStatus, jqXHR) {
                    window.$(datePicker).each(function (index, value) {
                        window.$(value).bootstrapMaterialDatePicker({
                            format: 'YYYY-MM-DD',
                            clearButton: true,
                            weekStart: 1,
                            time: false
                        });
                    });
                });
        });
}

var timePicker = window.$("[timePicker]");
if (timePicker.length > 0) {
    window.$('<link/>',
        {
            rel: 'stylesheet',
            type: 'text/css',
            href: '/' +
                direction +
                '/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css'
        }).appendTo('head');
    window.$.getScript("/" + direction + "/plugins/momentjs/moment.js",
        function (script, textStatus, jqXHR) {
            window.$.getScript(
                "/" + direction + "/plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js",
                function (script, textStatus, jqXHR) {
                    window.$(timePicker).each(function (index, value) {
                        window.$(value).bootstrapMaterialDatePicker({
                            format: 'HH:mm',
                            clearButton: true,
                            date: false
                        });
                    });
                });
        });
}

}

Good luck

how to create date picker in asp content page

1 Answers1